coolcare-lite-scada-component 1.0.0

package/es/graph/graphCore.js

@@ -0,0 +1,501 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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, _toPropertyKey(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 _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { Graph } from '@antv/x6';
+import { isNodeBase } from "../element/nodeBase";
+import { isReactShapeBase } from "../element/reactShapeBase";
+import emitter from "../utils/events";
+import { shapeName as eleContainerShape, defaultConfig as defaultConfigEleContainer } from "../element/EleContainer";
+import EdgePipe from "../edge/EdgePipe";
+import EdgeLinePort from "../edge/EdgeLinePort";
+import { shapeName as shapeNameEdgeLinePort } from "../edge/EdgeLinePort";
+import { PRIMARY_COLOR } from "../constant";
+var GraphCore = /*#__PURE__*/function () {
+  function GraphCore(options) {
+    _classCallCheck(this, GraphCore);
+    this.graph = void 0;
+    this.graph = new Graph(_objectSpread({
+      background: {
+        color: 'transparent' // 设置画布背景颜色
+      },
+
+      resizing: {
+        enabled: function enabled(node) {
+          if ((isNodeBase(node) || isReactShapeBase(node)) && node.disableResize) {
+            // 如果 node 定义了 disableResize, 那么不允许 resize
+            return false;
+          }
+          return true;
+        },
+        // 是否支持调整节点大小
+        minWidth: 4,
+        // 最小的调整宽度
+        minHeight: 4,
+        // 最小的调整高度
+        restricted: true,
+        // 调整大小边界是否可以超出画布边缘, true 的时候不可以超出
+        preserveAspectRatio: function preserveAspectRatio(node) {
+          // 调整大小过程中是否保持节点的宽高比例，默认为 false
+          var data = node.getData();
+          if (data === null || data === void 0 ? void 0 : data.keepRatio) {
+            return true;
+          }
+          return false;
+        }
+      },
+      rotating: {
+        enabled: function enabled(node) {
+          if ((isNodeBase(node) || isReactShapeBase(node)) && node.disableRotate) {
+            //
+            return false;
+          }
+          return true;
+        },
+        grid: 1 // 每次旋转的角度，默认值为
+      },
+
+      translating: {
+        // restrict: true, // 设置为 true, 节点不能移动超出画布区域
+      },
+      grid: {
+        size: 1,
+        // 网格大小
+        // type: 'mesh',
+        visible: false // 渲染网格背景
+      },
+
+      scroller: {
+        enabled: true,
+        pannable: true,
+        // pageVisible: true,
+        // pageBreak: false,
+        autoResize: true // 是否自动扩充/缩小画布
+      },
+
+      mousewheel: {
+        enabled: true,
+        minScale: 0.25,
+        modifiers: ['ctrl', 'meta']
+      },
+      history: {
+        enabled: true // 开启画布撤销/重做能力
+      },
+
+      selecting: {
+        enabled: true,
+        modifiers: ['shift'],
+        rubberband: true,
+        filter: [eleContainerShape],
+        showNodeSelectionBox: true,
+        pointerEvents: 'none'
+      },
+      interacting: {
+        nodeMovable: function nodeMovable(view) {
+          var cell = view.cell;
+          return cell.prop('shape') !== eleContainerShape;
+        }
+      },
+      keyboard: {
+        enabled: true // 开启键盘快捷键
+      },
+
+      clipboard: {
+        enabled: true,
+        useLocalStorage: true // 开启 useLocalStorage 后，被复制的节点/边同时被保存到 localStorage 中，浏览器刷新或者关闭后重新打开，复制/粘贴也能正常工作。
+      },
+
+      minimap: {
+        width: 220,
+        height: 150,
+        enabled: true,
+        container: document.getElementById('palette-minimap'),
+        padding: 0
+      },
+      connecting: {
+        snap: {
+          radius: 10 // 连线的过程中距离节点或者连接桩 10px 时会触发自动吸附
+        },
+
+        // 关于 manhattan https://x6.antv.vision/zh/docs/api/registry/router#manhattan
+        router: 'manhattan',
+        anchor: 'center',
+        connectionPoint: 'anchor',
+        connector: {
+          name: 'rounded',
+          args: {
+            radius: 8
+          }
+        },
+        allowBlank: true,
+        // 是否允许连接到画布空白位置的点，默认为 true。
+        createEdge: function createEdge(args) {
+          var _args$sourceCell$shap, _args$sourceCell$shap2;
+          if ((_args$sourceCell$shap = args.sourceCell.shapeName) === null || _args$sourceCell$shap === void 0 ? void 0 : _args$sourceCell$shap.includes('ele-pipe')) {
+            return new EdgePipe();
+          }
+          if ((_args$sourceCell$shap2 = args.sourceCell.shapeName) === null || _args$sourceCell$shap2 === void 0 ? void 0 : _args$sourceCell$shap2.includes('ele-line-port')) {
+            return new EdgeLinePort();
+          }
+        }
+      },
+      snapline: {
+        enabled: true,
+        tolerance: 2 // 对齐精度，即移动节点时与目标位置的距离小于 tolerance 时触发显示对齐线
+      }
+    }, options));
+    this.initEventListener();
+    this.bindHotKey();
+    this.initBehavior();
+    window.graph = this.graph;
+    emitter.emit('graphCore-initialized', this.graph);
+  }
+  /** 初始化事件监听 */
+  _createClass(GraphCore, [{
+    key: "initEventListener",
+    value: function initEventListener() {
+      var _this = this;
+      // #region node 或 edge 的 tooltip 显示与隐藏 start
+      // this.graph.on('cell:mouseenter', ({ cell }) => {
+      //   if (cell.isNode() && isNodeBase(cell)) {
+      //     if (!cell.tooltipContent) {
+      //       // 如果在编辑模式或者 cell 没有定义 tooltip, 那么不显示 tooltip
+      //       return;
+      //     }
+      //     cell.addTools([
+      //       {
+      //         name: 'tooltip',
+      //         args: {
+      //           tooltip: 'ele tooltip 111',
+      //         },
+      //       },
+      //     ]);
+      //   }
+      // });
+      // this.graph.on('cell:mouseleave', ({ cell }) => {
+      //   if (cell.isNode() && isNodeBase(cell)) {
+      //     if (cell.tooltipContent) {
+      //       cell.removeTool('tooltip');
+      //     }
+      //   }
+      // });
+      // #endregion node 或 edge 的 tooltip 显示与隐藏 end
+
+      // #region 双击 node 启用编辑功能 start
+      this.graph.on('node:dblclick', function (_ref) {
+        var cell = _ref.cell,
+          view = _ref.view;
+        if (isNodeBase(cell) || isReactShapeBase(cell)) {
+          if (cell.textEditable) {
+            cell.addTools({
+              name: 'node-editor',
+              args: {
+                getText: function getText() {
+                  return cell.getText(cell, view);
+                },
+                setText: function setText(_ref2) {
+                  var value = _ref2.value;
+                  return cell.setText(cell, value, view);
+                }
+              }
+            });
+          }
+        }
+      });
+      // #endregion 双击 node 启用编辑功能（添加 tool editTool) end
+
+      // #region 画布监听触发 start
+      this.graph.on('scale', function (e) {
+        emitter.emit('canvas-scale', e);
+      });
+      // #endregion 画布监听触发 end
+
+      // #region 监听线的连接 start
+      // this.graph.on('edge:connected', ({ isNew, edge }) => {
+      //   console.log('[143]-graphCore.ts', edge)
+      //   edge.attr('line/stroke', 'red')
+      //   // edge
+      //   if (isNew) {
+      //     const source = edge.getSourceCell()
+      //   }
+      // })
+      // #endregion 监听线的连接 end
+
+      // #region 历史队列改变时触发 start
+      this.graph.history.on('change', function () {
+        emitter.emit('history-change', {
+          canRedo: _this.graph.canRedo(),
+          canUndo: _this.graph.history.canUndo()
+        });
+      });
+      // #endregion 历史队列改变时触发 end
+
+      // #region 鼠标动态添加/删除：source-arrowhead 和 target-arrowhead start
+      this.graph.on('edge:mouseenter', function (_ref3) {
+        var cell = _ref3.cell;
+        if (cell.shapeName === shapeNameEdgeLinePort) {
+          cell.addTools([{
+            name: 'source-arrowhead',
+            args: {
+              attrs: {
+                fill: PRIMARY_COLOR
+              }
+            }
+          }, {
+            name: 'target-arrowhead',
+            args: {
+              attrs: {
+                fill: PRIMARY_COLOR
+              }
+            }
+          }]);
+        }
+      });
+      this.graph.on('edge:mouseleave', function (_ref4) {
+        var cell = _ref4.cell;
+        if (cell.hasTool('source-arrowhead')) {
+          cell.removeTool('source-arrowhead');
+        }
+        if (cell.hasTool('target-arrowhead')) {
+          cell.removeTool('target-arrowhead');
+        }
+      });
+      // #endregion 鼠标动态添加/删除工具：source-arrowhead 和 target-arrowhead end
+    }
+    /** 绑定快捷键 */
+  }, {
+    key: "bindHotKey",
+    value: function bindHotKey() {
+      var _this2 = this;
+      // #region 绑定删除快捷键 start
+      this.graph.bindKey('backspace', function (e) {
+        if (e.target instanceof Element && (e.target.classList.contains('x6-node-tool-editor') || e.target.classList.contains('x6-cell-tool-editor'))) {
+          // 不响应 Tool-editor 的 backspace keydown 事件。
+          return;
+        }
+        var cells = _this2.graph.getSelectedCells();
+        if (cells.length) {
+          _this2.graph.removeCells(cells);
+        }
+      });
+      // #endregion 绑定删除快捷键 end
+
+      // #region 绑定 redo 和 undo 的快捷键 start
+      this.graph.bindKey(['meta+z', 'ctrl+z'], function () {
+        if (_this2.graph.history.canUndo()) {
+          _this2.graph.history.undo();
+        }
+        return false;
+      });
+      this.graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], function () {
+        if (_this2.graph.history.canRedo()) {
+          _this2.graph.history.redo();
+        }
+        return false;
+      });
+      // #endregion 绑定 redo 和 undo 的快捷键 end
+
+      // #region 绑定 保存组态配置 start
+      this.graph.bindKey(['meta+s', 'ctrl+s'], function () {
+        emitter.emit('saveScada');
+        return false;
+      });
+      // #endregion 绑定 保存组态配置 end
+
+      // #region 绑定全选快捷键 start
+      this.graph.bindKey(['meta+a', 'ctrl+a'], function () {
+        var nodes = _this2.graph.getNodes();
+        if (nodes) {
+          _this2.graph.select(nodes);
+        }
+      });
+      // #endregion 绑定全选快捷键 end
+
+      // #region 绑定复制、粘贴、剪切 start
+      this.graph.bindKey(['meta+c', 'ctrl+c'], function () {
+        var cells = _this2.graph.getSelectedCells();
+        if (cells.length) {
+          _this2.graph.copy(cells);
+        }
+        return false;
+      });
+      this.graph.bindKey(['meta+x', 'ctrl+x'], function () {
+        var cells = _this2.graph.getSelectedCells();
+        if (cells.length) {
+          _this2.graph.cut(cells);
+        }
+        return false;
+      });
+      this.graph.bindKey(['meta+v', 'ctrl+v'], function () {
+        if (!_this2.graph.isClipboardEmpty()) {
+          var cells = _this2.graph.paste({
+            offset: 36
+          });
+          _this2.graph.cleanSelection();
+          // 删除复制的 cell 已绑定的点位
+          cells === null || cells === void 0 ? void 0 : cells.forEach(function (cell) {
+            cell.setData({
+              pointList: []
+            }, {
+              deep: false
+            });
+
+            // ele-fan 元素单独处理
+            if (cell.shape === 'ele-fan') {
+              var cellData = cell.data;
+              cellData.frostPoint = undefined;
+              cellData.faultPoint = undefined;
+              cellData.switchPoint = undefined;
+              cellData.refrigerationPoint = undefined;
+            }
+          });
+          _this2.graph.select(cells);
+        }
+        return false;
+      });
+      // #endregion 绑定复制、粘贴、剪切 end
+
+      // #region 绑定放大缩小 start
+      // this.graph.bindKey(['ctrl+1', 'meta+1'], () => {
+      //   const zoom = this.graph.zoom()
+      //   if (zoom < 1.5) {
+      //     this.graph.zoom(0.1)
+      //   }
+      // })
+      // this.graph.bindKey(['ctrl+2', 'meta+2'], () => {
+      //   const zoom = this.graph.zoom()
+      //   if (zoom > 0.5) {
+      //     this.graph.zoom(-0.1)
+      //   }
+      // })
+      // #endregion 绑定放大缩小 end
+    }
+
+    /** 初始化行为 */
+  }, {
+    key: "initBehavior",
+    value: function initBehavior() {
+      // #region 控制连接桩显示/隐藏 start
+      var showPorts = function showPorts(ports, show) {
+        for (var i = 0, len = ports.length; i < len; i++) {
+          ports[i].style.visibility = show ? 'visible' : 'hidden';
+        }
+      };
+      this.graph.on('node:mouseenter', function () {
+        // #region mouseenter 后，显示所有 node 的连接桩 start
+        var container = document.getElementById('palette-wrap');
+        var ports = container.querySelectorAll('.x6-port-body');
+        showPorts(ports, true);
+        // #endregion mouseenter 后，显示所有 node 的连接桩 end
+      });
+
+      this.graph.on('node:mouseleave', function () {
+        // #region mouseleave 后，隐藏所有 node 的连接桩 start
+        var container = document.getElementById('palette-wrap');
+        var ports = container.querySelectorAll('.x6-port-body');
+        showPorts(ports, false);
+        // #endregion mouseleave 后，隐藏所有 node 的连接桩 end
+      });
+
+      // 选中的节点/边发生改变(增删)时触发。
+      this.graph.on('selection:changed', function (e) {
+        if (process.env.NODE_ENV === 'development') {
+          // eslint-disable-next-line no-console
+          console.log('selection:changed', e);
+        }
+        emitter.emit('selection-changed', e);
+      });
+    }
+
+    /** 删除选中的 cell */
+  }, {
+    key: "removeSelectionCells",
+    value: function removeSelectionCells() {
+      var cells = this.graph.getSelectedCells();
+      if (cells.length) {
+        this.graph.removeCells(cells);
+      }
+    }
+
+    /** 复制选中元素 */
+  }, {
+    key: "copySelectionCells",
+    value: function copySelectionCells() {
+      var cells = this.graph.getSelectedCells();
+      if (cells.length) {
+        this.graph.copy(cells);
+        if (!this.graph.isClipboardEmpty()) {
+          this.graph.paste({
+            offset: 36
+          });
+          // this.graph.cleanSelection();
+          // this.graph.select(cells);
+        }
+      }
+    }
+
+    /** 组态大小更新 */
+  }, {
+    key: "scadaResize",
+    value: function scadaResize(width, height) {
+      var eleContainer = this.graph.getCells().find(function (cell) {
+        return cell.prop('shape') === eleContainerShape;
+      });
+      eleContainer.setProp('size', {
+        width: width,
+        height: height
+      });
+    }
+
+    /** 组态容器背景更新 */
+  }, {
+    key: "scadaSetBg",
+    value: function scadaSetBg(backgroundColor, backgroundImage, borderRadius) {
+      var eleContainer = this.graph.getCells().find(function (cell) {
+        return cell.prop('shape') === eleContainerShape;
+      });
+      eleContainer.setData({
+        backgroundColor: backgroundColor,
+        backgroundImage: backgroundImage,
+        borderRadius: borderRadius
+      }, {
+        deep: false
+      });
+    }
+  }, {
+    key: "initScadaContainer",
+    value: function initScadaContainer(width, height) {
+      this.graph.addNode(_objectSpread(_objectSpread({}, defaultConfigEleContainer), {}, {
+        width: width,
+        height: height
+      }));
+      // 缩放画布内容，使画布内容充满视口
+      this.graph.zoomToFit({
+        padding: 20,
+        // 边距
+        preserveAspectRatio: true // 是否保持长宽比。
+      });
+    }
+
+    /** 删除组态容器的背景图 */
+  }, {
+    key: "removeScadaContainerBackgroundImage",
+    value: function removeScadaContainerBackgroundImage() {
+      var eleContainer = this.graph.getCells().find(function (cell) {
+        return cell.prop('shape') === eleContainerShape;
+      });
+      eleContainer.setData({
+        backgroundImage: ''
+      }, {
+        deep: false
+      });
+    }
+  }]);
+  return GraphCore;
+}();
+export { GraphCore as default };

package/es/graph/tools/ToolTipTool.js

@@ -0,0 +1,139 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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, _toPropertyKey(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 _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+import React from "react";
+import ReactDom from 'react-dom';
+import { Tooltip } from 'antd';
+import { Graph, ToolsView } from '@antv/x6';
+import { isNodeBase } from "../../element/nodeBase";
+import { isReactShapeBase } from "../../element/reactShapeBase";
+var toolName = 'tooltip';
+var TooltipTool = /*#__PURE__*/function (_ToolsView$ToolItem) {
+  _inherits(TooltipTool, _ToolsView$ToolItem);
+  var _super = _createSuper(TooltipTool);
+  function TooltipTool() {
+    var _this;
+    _classCallCheck(this, TooltipTool);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _this.knob = undefined;
+    return _this;
+  }
+  _createClass(TooltipTool, [{
+    key: "render",
+    value: function render() {
+      _get(_getPrototypeOf(TooltipTool.prototype), "render", this).call(this);
+      if (!this.knob) {
+        this.knob = ToolsView.createElement('div', false);
+        this.knob.style.position = 'absolute';
+        this.container.appendChild(this.knob);
+      }
+      return this;
+    }
+  }, {
+    key: "toggleTooltip",
+    value: function toggleTooltip(visible) {
+      if (!this.knob) {
+        return;
+      }
+
+      // 从 DOM this.knob 中卸载组件  https://zh-hans.reactjs.org/docs/react-dom.html#unmountcomponentatnode
+      ReactDom.unmountComponentAtNode(this.knob);
+      if (visible) {
+        // 如果 this.cell 是节点，且 this.cell.tooltipContent 不为空，则显示节点的 tooltip
+        if (this.cell.isNode() && (isNodeBase(this.cell) || isReactShapeBase(this.cell)) && this.cell.tooltipContent) {
+          var DefaultTitle = function DefaultTitle() {
+            return /*#__PURE__*/React.createElement("div", null, "Undefined");
+          };
+          var title = /*#__PURE__*/React.createElement(DefaultTitle, null);
+          if (this.cell.tooltipContent) {
+            var Title = this.cell.tooltipContent;
+            title = /*#__PURE__*/React.createElement(Title, {
+              node: this.cell
+            });
+          }
+          ReactDom.render( /*#__PURE__*/React.createElement(Tooltip, {
+            title: title,
+            visible: true,
+            mouseLeaveDelay: 300
+          }, /*#__PURE__*/React.createElement("div", null)), this.knob);
+        }
+      }
+    }
+  }, {
+    key: "updatePosition",
+    value: function updatePosition(e) {
+      if (!this.knob) {
+        return;
+      }
+      var style = this.knob.style;
+      if (e) {
+        var p = this.graph.clientToGraph(e.clientX, e.clientY);
+        style.display = 'block';
+        style.left = "".concat(p.x, "px");
+        style.top = "".concat(p.y - 15, "px");
+      } else {
+        style.display = 'none';
+        style.left = '-1000px';
+        style.top = '-1000px';
+      }
+    }
+  }, {
+    key: "onMouseEnter",
+    value: function onMouseEnter(_ref) {
+      var e = _ref.e;
+      this.updatePosition(e);
+      this.toggleTooltip(true);
+    }
+  }, {
+    key: "onMouseLeave",
+    value: function onMouseLeave() {
+      this.updatePosition();
+      this.toggleTooltip(false);
+    }
+  }, {
+    key: "onMouseMove",
+    value: function onMouseMove() {
+      this.updatePosition();
+      this.toggleTooltip(false);
+    }
+  }, {
+    key: "delegateEvents",
+    value: function delegateEvents() {
+      this.cellView.on('cell:mouseenter', this.onMouseEnter, this);
+      this.cellView.on('cell:mouseleave', this.onMouseLeave, this);
+      this.cellView.on('cell:mousemove', this.onMouseMove, this);
+      this.cellView.on('cell:click', this.onMouseLeave, this);
+      return _get(_getPrototypeOf(TooltipTool.prototype), "delegateEvents", this).call(this);
+    }
+  }, {
+    key: "onRemove",
+    value: function onRemove() {
+      this.cellView.off('cell:mouseenter', this.onMouseEnter, this);
+      this.cellView.off('cell:mouseleave', this.onMouseLeave, this);
+      this.cellView.off('cell:mousemove', this.onMouseMove, this);
+      this.cellView.off('cell:click', this.onMouseLeave, this);
+    }
+  }]);
+  return TooltipTool;
+}(ToolsView.ToolItem);
+TooltipTool.config({
+  tagName: 'div',
+  isSVGElement: false
+});
+Graph.registerNodeTool(toolName, TooltipTool, true);
+Graph.registerEdgeTool(toolName, TooltipTool, true);

package/es/graph/tools/registerX6Tool.js

@@ -0,0 +1 @@
+import "./ToolTipTool";

package/es/hooks/index.js

@@ -0,0 +1,7 @@
+export { default as useFirstMountState } from "./useFirstMountState";
+export { default as useCMDKey } from "./useCMDKey";
+export { default as usePointWatch } from "./usePointWatch";
+export { default as useQuery } from "./useQuery";
+export { default as useForceUpdate } from "./useForceUpdate";
+export { default as useEleEventHandle } from "./useEleEventHandle";
+export * from "./useMittNamespace";

package/es/hooks/useCMDKey.js

@@ -0,0 +1,19 @@
+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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState, useEffect } from 'react';
+import { getOS } from "../utils";
+var useCMDKey = function useCMDKey() {
+  var _useState = useState('Ctrl'),
+    _useState2 = _slicedToArray(_useState, 2),
+    key = _useState2[0],
+    setKey = _useState2[1];
+  useEffect(function () {
+    setKey(getOS().includes('window') ? 'Ctrl' : '⌘');
+  }, []);
+  return key;
+};
+export default useCMDKey;