strategy-panel 1.0.0

package/es/pages/rx-models/graph-core.js

@@ -0,0 +1,755 @@
+var _excluded = ["wrapper", "container", "nodes", "edges"];
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { Graph } from '@antv/x6';
+import { BehaviorSubject, fromEventPattern, merge } from 'rxjs';
+import { debounceTime, map, tap, scan } from 'rxjs/operators';
+import "./graph-core.less";
+
+function setCellsSelectedStatus(cells, selected) {
+  cells.forEach(function (cell) {
+    var data = cell.getData() || {};
+    cell.setData(_objectSpread(_objectSpread({}, data), {}, {
+      selected: selected
+    }));
+  });
+}
+
+export var GraphCore = /*#__PURE__*/function () {
+  // 传入的 nodes 原始信息
+  // 传入的 edges 原始信息
+  // 当前画布右键点击信息
+  // 选中的节点
+  // 待复制的节点 id
+  // 窗口大小 resize 的订阅
+  // 右键菜单的订阅
+  // 节点右键菜单的订阅
+  // 选中节点的订阅
+  // 产生连线的订阅
+  // 连线已删除的订阅
+  // 节点移动的订阅
+  // 删除节点或连线的订阅
+  // 复制节点的订阅
+  function GraphCore(options) {
+    var _this = this;
+
+    _classCallCheck(this, GraphCore);
+
+    this.wrapper = void 0;
+    this.container = void 0;
+    this.nodeMetas = void 0;
+    this.edgeMetas = void 0;
+    this.options = void 0;
+    this.graph = void 0;
+    this.contextMenuInfo$ = new BehaviorSubject(null);
+    this.selectedNodes$ = new BehaviorSubject([]);
+    this.copyableNodeId$ = new BehaviorSubject('');
+    this.windowResizeSub = void 0;
+    this.contextMenuSub = void 0;
+    this.nodeContextMenuSub = void 0;
+    this.selectNodeSub = void 0;
+    this.connectNodeSub = void 0;
+    this.connectionRemovedSub = void 0;
+    this.moveNodesSub = void 0;
+    this.deleteNodeOrEdgeSub = void 0;
+    this.copyNodeSub = void 0;
+
+    this.resizeGraph = function () {
+      var graph = _this.graph,
+          wrapper = _this.wrapper;
+
+      if (graph && wrapper) {
+        requestAnimationFrame(function () {
+          var width = wrapper.clientWidth;
+          var height = wrapper.clientHeight;
+          graph.resize(width, height);
+        });
+      }
+    };
+
+    this.addNode = function (nodeMeta) {
+      var _this$nodeMetas;
+
+      (_this$nodeMetas = _this.nodeMetas) === null || _this$nodeMetas === void 0 ? void 0 : _this$nodeMetas.push(nodeMeta);
+      return _this.renderNode(nodeMeta);
+    };
+
+    this.addEdge = function (edgeMeta) {
+      var _this$edgeMetas;
+
+      (_this$edgeMetas = _this.edgeMetas) === null || _this$edgeMetas === void 0 ? void 0 : _this$edgeMetas.push(edgeMeta);
+      return _this.renderEdge(edgeMeta);
+    };
+
+    this.getNodeById = function (nodeId) {
+      var _this$graph;
+
+      var node = (_this$graph = _this.graph) === null || _this$graph === void 0 ? void 0 : _this$graph.getCellById(nodeId);
+
+      if (node === null || node === void 0 ? void 0 : node.isNode()) {
+        return node;
+      }
+
+      return undefined;
+    };
+
+    this.getNodes = function () {
+      var _this$graph2;
+
+      return ((_this$graph2 = _this.graph) === null || _this$graph2 === void 0 ? void 0 : _this$graph2.getNodes()) || [];
+    };
+
+    this.getEdgeById = function (nodeId) {
+      var _this$graph3;
+
+      var edge = (_this$graph3 = _this.graph) === null || _this$graph3 === void 0 ? void 0 : _this$graph3.getCellById(nodeId);
+
+      if (edge === null || edge === void 0 ? void 0 : edge.isEdge()) {
+        return edge;
+      }
+
+      return undefined;
+    };
+
+    this.getEdges = function () {
+      var _this$graph4;
+
+      return ((_this$graph4 = _this.graph) === null || _this$graph4 === void 0 ? void 0 : _this$graph4.getEdges()) || [];
+    };
+
+    this.getCellById = function (cellId) {
+      var _this$graph5;
+
+      var cell = (_this$graph5 = _this.graph) === null || _this$graph5 === void 0 ? void 0 : _this$graph5.getCellById(cellId);
+
+      if ((cell === null || cell === void 0 ? void 0 : cell.isNode()) || (cell === null || cell === void 0 ? void 0 : cell.isEdge())) {
+        return cell;
+      }
+
+      return undefined;
+    };
+
+    this.getCells = function () {
+      var _this$graph6;
+
+      return ((_this$graph6 = _this.graph) === null || _this$graph6 === void 0 ? void 0 : _this$graph6.getCells()) || [];
+    };
+
+    this.updateNodeById = function (nodeId, handler) {
+      handler(_this.getNodeById(nodeId));
+    };
+
+    this.updateNodes = function (handler) {
+      handler(_this.getNodes());
+    };
+
+    this.updateEdgeById = function (edgeId, handler) {
+      var _this$graph7;
+
+      var edge = (_this$graph7 = _this.graph) === null || _this$graph7 === void 0 ? void 0 : _this$graph7.getCellById(edgeId);
+
+      if (edge === null || edge === void 0 ? void 0 : edge.isEdge()) {
+        handler(edge);
+      } else {
+        handler(undefined);
+      }
+    };
+
+    this.updateEdges = function (handler) {
+      var _this$graph8;
+
+      var edges = ((_this$graph8 = _this.graph) === null || _this$graph8 === void 0 ? void 0 : _this$graph8.getEdges()) || [];
+      handler(edges);
+    };
+
+    this.deleteNodes = function (nodes) {
+      var _this$graph9;
+
+      var target = [].concat(nodes); // @ts-ignore
+
+      _this.nodeMetas = _this.nodeMetas.filter(function (nodeMeta) {
+        return !target.includes(nodeMeta.id);
+      });
+      (_this$graph9 = _this.graph) === null || _this$graph9 === void 0 ? void 0 : _this$graph9.removeCells(target);
+    };
+
+    this.deleteEdges = function (edges) {
+      var _this$graph10;
+
+      var target = [].concat(edges);
+      var targetIds = target.map(function (i) {
+        return typeof i === 'string' ? i : i.id;
+      }); // @ts-ignore
+
+      _this.edgeMetas = _this.edgeMetas.filter(function (edgeMeta) {
+        return !targetIds.includes(edgeMeta.id);
+      });
+      (_this$graph10 = _this.graph) === null || _this$graph10 === void 0 ? void 0 : _this$graph10.removeCells(target);
+    };
+
+    this.clearContextMenuInfo = function () {
+      _this.contextMenuInfo$.next(null);
+    };
+
+    this.zoom = function (factor) {
+      if (typeof factor === 'number') {
+        var _this$graph11;
+
+        (_this$graph11 = _this.graph) === null || _this$graph11 === void 0 ? void 0 : _this$graph11.zoom(factor);
+      } else if (factor === 'fit') {
+        var _this$graph12;
+
+        (_this$graph12 = _this.graph) === null || _this$graph12 === void 0 ? void 0 : _this$graph12.zoomToFit({
+          padding: 12
+        });
+      } else if (factor === 'real') {
+        var _this$graph13, _this$graph14;
+
+        (_this$graph13 = _this.graph) === null || _this$graph13 === void 0 ? void 0 : _this$graph13.scale(1);
+        (_this$graph14 = _this.graph) === null || _this$graph14 === void 0 ? void 0 : _this$graph14.centerContent();
+      }
+    };
+
+    this.toggleSelectionEnabled = function (enabled) {
+      var graph = _this.graph;
+
+      if (graph) {
+        var needEnableRubberBand = typeof enabled === 'undefined' ? !graph.isRubberbandEnabled() : enabled;
+
+        if (needEnableRubberBand) {
+          graph.disablePanning();
+          graph.enableRubberband(); // graph.scroller.widget?.setCursor('crosshair', { silent: true })
+        } else {
+          graph.enablePanning();
+          graph.disableRubberband(); // graph.scroller.widget?.setCursor('grab', { silent: true })
+        }
+      }
+    };
+
+    this.selectNodes = function (ids) {
+      var graph = _this.graph;
+
+      if (graph) {
+        var target = [].concat(ids).map(function (i) {
+          return i.toString();
+        });
+        graph.cleanSelection();
+        graph.select(target);
+
+        if (!Array.isArray(ids)) {
+          var cell = graph.getCellById(ids);
+          graph.scrollToCell(cell);
+        }
+      }
+    };
+
+    this.unSelectNode = function () {
+      var graph = _this.graph;
+
+      if (graph) {
+        graph.cleanSelection();
+      }
+    };
+
+    this.redo = function () {
+      var graph = _this.graph;
+
+      if (graph) {
+        graph.redo();
+      }
+    };
+
+    this.undo = function () {
+      var graph = _this.graph;
+
+      if (graph) {
+        graph.undo();
+      }
+    };
+
+    this.setCopyableNodeId = function (id) {
+      _this.copyableNodeId$.next(id);
+    };
+
+    this.throwRenderError = function () {
+      if (!_this.wrapper) {
+        throw new Error('Wrapper element is needed.');
+      }
+
+      if (!_this.container) {
+        throw new Error('Container element is needed.');
+      }
+
+      if (!_this.nodeMetas) {
+        throw new Error('NodeMetas could not be empty');
+      }
+
+      if (!_this.edgeMetas) {
+        throw new Error('EdgeMetas could not be empty');
+      }
+    };
+
+    var _wrapper = options.wrapper,
+        container = options.container,
+        _nodes = options.nodes,
+        _edges = options.edges,
+        others = _objectWithoutProperties(options, _excluded);
+
+    this.setMeta(options);
+    this.options = others;
+  }
+
+  _createClass(GraphCore, [{
+    key: "setMeta",
+    value: function setMeta(params) {
+      var wrapper = params.wrapper,
+          container = params.container,
+          nodes = params.nodes,
+          edges = params.edges;
+
+      if (wrapper) {
+        this.setWrapper(wrapper);
+      }
+
+      if (container) {
+        this.setContainer(container);
+      }
+
+      if (nodes) {
+        this.setNodes(nodes);
+      }
+
+      if (edges) {
+        this.setEdges(edges);
+      }
+    }
+  }, {
+    key: "isMetaValid",
+    get: function get() {
+      var wrapper = this.wrapper,
+          container = this.container,
+          nodeMetas = this.nodeMetas,
+          edgeMetas = this.edgeMetas;
+      return !!wrapper && !!container && !!nodeMetas && !!edgeMetas;
+    }
+  }, {
+    key: "nodes",
+    get: function get() {
+      var _this$graph15;
+
+      return ((_this$graph15 = this.graph) === null || _this$graph15 === void 0 ? void 0 : _this$graph15.getNodes()) || [];
+    }
+  }, {
+    key: "setWrapper",
+    value: function setWrapper(wrapper) {
+      this.wrapper = wrapper;
+    }
+  }, {
+    key: "setContainer",
+    value: function setContainer(container) {
+      this.container = container;
+      this.options.container = container;
+    }
+  }, {
+    key: "setNodes",
+    value: function setNodes(nodes) {
+      this.nodeMetas = nodes;
+    }
+  }, {
+    key: "setEdges",
+    value: function setEdges(edges) {
+      this.edgeMetas = edges;
+    } // 渲染
+
+  }, {
+    key: "render",
+    value: function render(params) {
+      var _this2 = this;
+
+      this.setMeta(params);
+
+      if (this.isMetaValid) {
+        var wrapper = this.wrapper,
+            options = this.options,
+            nodeMetas = this.nodeMetas,
+            edgeMetas = this.edgeMetas;
+        var width = wrapper.clientWidth - 12;
+        var height = wrapper.clientHeight;
+        var graph = new Graph(_objectSpread(_objectSpread(_objectSpread({}, options), {}, {
+          width: width
+        }, params.options), {}, {
+          height: height
+        }));
+        this.graph = graph;
+        nodeMetas.forEach(function (nodeMeta) {
+          return _this2.renderNode(nodeMeta);
+        });
+        edgeMetas.forEach(function (edgeMeta) {
+          return _this2.renderEdge(edgeMeta);
+        });
+        this.afterLayout();
+
+        if (graph.isFrozen()) {
+          graph.unfreeze();
+        }
+
+        requestAnimationFrame(function () {
+          graph.centerContent();
+        }); // 处理窗口缩放
+
+        this.windowResizeSub = fromEventPattern(function (handler) {
+          window.addEventListener('resize', handler);
+        }, function (handler) {
+          window.removeEventListener('resize', handler);
+        }).subscribe(this.resizeGraph); // 处理右键菜单
+
+        var nodeContextMenuObs = fromEventPattern(function (handler) {
+          graph.on('node:contextmenu', function (data) {
+            handler({
+              type: 'node',
+              data: data
+            });
+          });
+        }, function (handler) {
+          graph.off('node:contextmenu', handler);
+        });
+        var edgeContextMenuObs = fromEventPattern(function (handler) {
+          graph.on('edge:contextmenu', function (data) {
+            handler({
+              type: 'edge',
+              data: data
+            });
+          });
+        }, function (handler) {
+          graph.off('edge:contextmenu', handler);
+        });
+        var graphContextMenuObs = fromEventPattern(function (handler) {
+          graph.on('blank:contextmenu', function (data) {
+            handler({
+              type: 'graph',
+              data: data
+            });
+          });
+        }, function (handler) {
+          graph.off('edge:contextmenu', handler);
+        });
+        this.nodeContextMenuSub = nodeContextMenuObs.subscribe(function (data) {
+          _this2.onNodeContextMenu(data);
+        });
+        this.contextMenuSub = merge(nodeContextMenuObs, edgeContextMenuObs, graphContextMenuObs).subscribe(function (data) {
+          if (_this2.validateContextMenu(data)) {
+            _this2.contextMenuInfo$.next(data);
+
+            _this2.onContextMenu(data);
+          }
+        }); // 处理节点选中事件
+
+        this.selectNodeSub = fromEventPattern(function (handler) {
+          graph.on('selection:changed', handler);
+        }, function (handler) {
+          graph.off('selection:changed', handler);
+        }).subscribe(function (args) {
+          var removed = args.removed,
+              selected = args.selected;
+          setCellsSelectedStatus(removed, false);
+          setCellsSelectedStatus(selected, true);
+
+          _this2.onSelectNodes(selected);
+        }); // 处理产生连线事件
+
+        this.connectNodeSub = fromEventPattern(function (handler) {
+          graph.on('edge:connected', handler);
+        }, function (handler) {
+          graph.off('edge:connected', handler);
+        }).subscribe(function (args) {
+          _this2.onConnectNode(args);
+        }); // 处理连线删除事件
+
+        this.connectionRemovedSub = fromEventPattern(function (handler) {
+          graph.on('edge:removed', handler);
+        }, function (handler) {
+          graph.off('edge:removed', handler);
+        }).subscribe(function (args) {
+          _this2.onConnectionRemoved(args);
+        }); // 处理节点移动事件
+
+        var moveStarted = false; // 因为需要对移动事件做分片，区分两次移动事件，所以引入一个记录移动开始的变量
+
+        this.moveNodesSub = fromEventPattern(function (handler) {
+          graph.on('node:change:position', handler);
+        }, function (handler) {
+          graph.off('node:change:position', handler);
+        }).pipe(tap(function (args) {
+          _this2.onMoveNodeStart(args);
+        }), scan(function (accum, args) {
+          var currentAccum = !moveStarted ? [] : accum;
+          var node = args.node;
+          var id = node.id;
+          var matchItemIndex = currentAccum.findIndex(function (item) {
+            return item.id === id;
+          });
+
+          if (matchItemIndex > -1) {
+            currentAccum.splice(matchItemIndex, 1, {
+              id: id,
+              data: args
+            });
+          } else {
+            currentAccum.push({
+              id: id,
+              data: args
+            });
+          }
+
+          return currentAccum;
+        }, []), tap(function () {
+          if (!moveStarted) {
+            moveStarted = true;
+          }
+        }), debounceTime(300), tap(function () {
+          if (moveStarted) {
+            moveStarted = false;
+          }
+        }), map(function (items) {
+          return items.map(function (item) {
+            return item.data;
+          });
+        })).subscribe(function (movedNodes) {
+          _this2.onMoveNodes(movedNodes);
+        }); // 处理删除节点或连线事件
+
+        this.deleteNodeOrEdgeSub = fromEventPattern(function (handler) {
+          graph.bindKey(['delete', 'backspace'], handler);
+        }, function () {
+          graph.unbindKey(['delete', 'backspace']);
+        }).subscribe(function () {
+          var selectedCells = graph.getSelectedCells();
+          var selectedNodes = selectedCells.filter(function (cell) {
+            return cell.isNode();
+          });
+          var selectedEdges = selectedCells.filter(function (cell) {
+            return cell.isEdge();
+          });
+
+          _this2.onDeleteNodeOrEdge({
+            nodes: selectedNodes,
+            edges: selectedEdges
+          });
+        }); // 处理节点复制事件
+
+        this.copyNodeSub = fromEventPattern(function (handler) {
+          graph.bindKey(['command+c', 'ctrl+c', 'command+v', 'ctrl+v'], handler);
+        }, function () {
+          graph.unbindKey(['command+c', 'ctrl+c', 'command+v', 'ctrl+v']);
+        }).subscribe(function (args) {
+          var _args = _slicedToArray(args, 2),
+              action = _args[1];
+
+          var selectedCells = graph.getSelectedCells().filter(function (cell) {
+            return _this2.validateNodeCopyable(cell);
+          });
+
+          var copyableNodeId = _this2.copyableNodeId$.getValue();
+
+          var copyableNode;
+
+          if (copyableNodeId) {
+            copyableNode = graph.getCellById(copyableNodeId);
+          }
+
+          switch (action) {
+            case 'command+c':
+            case 'ctrl+c':
+              if (selectedCells === null || selectedCells === void 0 ? void 0 : selectedCells.length) {
+                _this2.setCopyableNodeId(selectedCells[0].id); // 当前只支持单节点的复制粘贴
+
+              }
+
+              break;
+
+            case 'command+v':
+            case 'ctrl+v':
+              // @ts-ignore
+              if (copyableNode) {
+                _this2.onCopyNode(copyableNode);
+              }
+
+              break;
+
+            default:
+          }
+        });
+      } else {
+        this.throwRenderError();
+      }
+    }
+  }, {
+    key: "renderNode",
+    value: function renderNode(nodeMeta) {
+      console.log('renderNode => ', nodeMeta);
+      return this.graph.addNode(nodeMeta);
+    }
+  }, {
+    key: "renderEdge",
+    value: function renderEdge(edgeMeta) {
+      console.log('renderEdge => ', edgeMeta);
+      return this.graph.addEdge(edgeMeta);
+    }
+  }, {
+    key: "afterLayout",
+    value: function afterLayout() {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] call afterLayout');
+      }
+    }
+  }, {
+    key: "validateContextMenu",
+    value: function validateContextMenu(data) {
+      return !!data;
+    }
+  }, {
+    key: "onContextMenu",
+    value: function onContextMenu(data) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] context menu info:', data);
+      }
+    }
+  }, {
+    key: "onNodeContextMenu",
+    value: function onNodeContextMenu(data) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] context menu info:', data);
+      }
+    }
+  }, {
+    key: "onSelectNodes",
+    value: function onSelectNodes(nodes) {
+      this.selectedNodes$.next(nodes);
+
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] select nodes:', nodes);
+      }
+    }
+  }, {
+    key: "onConnectNode",
+    value: function onConnectNode(args) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] connect nodes:', args);
+      }
+    }
+  }, {
+    key: "onConnectionRemoved",
+    value: function onConnectionRemoved(args) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] delete connection:', args);
+      }
+    }
+  }, {
+    key: "onMoveNodeStart",
+    value: function onMoveNodeStart(args) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] move nodes start:', args);
+      }
+    }
+  }, {
+    key: "onMoveNodes",
+    value: function onMoveNodes(args) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] move nodes:', args);
+      }
+    } // 按下删除键的回调，默认参数为当前选中的节点和边
+
+  }, {
+    key: "onDeleteNodeOrEdge",
+    value: function onDeleteNodeOrEdge(args) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] delete nodes or edge:', args);
+      }
+    } // 校验节点是否可复制，为 true 则可被用于复制
+
+  }, {
+    key: "validateNodeCopyable",
+    value: function validateNodeCopyable(node) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] validate nodes copyable:', node);
+      }
+
+      return true;
+    } // 按下粘贴键的回调，默认参数为待复制的节点
+
+  }, {
+    key: "onCopyNode",
+    value: function onCopyNode(copyNode) {
+      if (process.env.NODE_ENV === 'development') {
+        console.log('[GraphCore] copy nodes:', copyNode);
+      }
+    }
+    /* 以下为主动触发的方法 */
+
+  }, {
+    key: "dispose",
+    value: // 注销
+    function dispose() {
+      var _this$windowResizeSub, _this$contextMenuSub, _this$nodeContextMenu, _this$selectNodeSub, _this$connectNodeSub, _this$connectionRemov, _this$moveNodesSub, _this$deleteNodeOrEdg, _this$copyNodeSub;
+
+      (_this$windowResizeSub = this.windowResizeSub) === null || _this$windowResizeSub === void 0 ? void 0 : _this$windowResizeSub.unsubscribe();
+      (_this$contextMenuSub = this.contextMenuSub) === null || _this$contextMenuSub === void 0 ? void 0 : _this$contextMenuSub.unsubscribe();
+      (_this$nodeContextMenu = this.nodeContextMenuSub) === null || _this$nodeContextMenu === void 0 ? void 0 : _this$nodeContextMenu.unsubscribe();
+      (_this$selectNodeSub = this.selectNodeSub) === null || _this$selectNodeSub === void 0 ? void 0 : _this$selectNodeSub.unsubscribe();
+      (_this$connectNodeSub = this.connectNodeSub) === null || _this$connectNodeSub === void 0 ? void 0 : _this$connectNodeSub.unsubscribe();
+      (_this$connectionRemov = this.connectionRemovedSub) === null || _this$connectionRemov === void 0 ? void 0 : _this$connectionRemov.unsubscribe();
+      (_this$moveNodesSub = this.moveNodesSub) === null || _this$moveNodesSub === void 0 ? void 0 : _this$moveNodesSub.unsubscribe();
+      (_this$deleteNodeOrEdg = this.deleteNodeOrEdgeSub) === null || _this$deleteNodeOrEdg === void 0 ? void 0 : _this$deleteNodeOrEdg.unsubscribe();
+      (_this$copyNodeSub = this.copyNodeSub) === null || _this$copyNodeSub === void 0 ? void 0 : _this$copyNodeSub.unsubscribe(); // ! 这一步要注意放在图的事件订阅都取消了之后
+
+      if (this.wrapper) {
+        var _this$graph16;
+
+        var graphScroller = this.wrapper.querySelector('.x6-graph-scroller');
+
+        if (graphScroller) {
+          graphScroller.innerHTML = '';
+          graphScroller.setAttribute('style', '');
+          graphScroller.setAttribute('class', '');
+
+          if (this.container) {
+            this.container.innerHTML = '';
+            this.container.setAttribute('style', '');
+            this.container.setAttribute('class', '');
+          }
+        }
+
+        (_this$graph16 = this.graph) === null || _this$graph16 === void 0 ? void 0 : _this$graph16.dispose();
+      }
+    }
+  }]);
+
+  return GraphCore;
+}();