ronds-metadata 1.2.10 → 1.2.12

package/es/framework/graph/index.js

@@ -0,0 +1,515 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+var _excluded = ["wrapper", "container", "nodes", "edges"];
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 13:55:44
+ * @LastEditTime: 2022-05-31 10:43:04
+ */
+import { Graph } from '@antv/x6';
+import { debounceTime, fromEventPattern, map, merge, scan, tap } from 'rxjs';
+import './index.less';
+export var GraphCore = /*#__PURE__*/function () {
+  // 传入的 nodes 原始信息
+  // 传入的 edges 原始信息
+  function GraphCore(options) {
+    var _this = this;
+
+    _classCallCheck(this, GraphCore);
+
+    this.wrapper = void 0;
+    this.container = void 0;
+    this.nodeMetas = [];
+    this.edgeMetas = [];
+    this.options = void 0;
+    this.graph = void 0;
+    this.factorySub = {};
+
+    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.zoom = function (factor) {
+      if (typeof factor === 'number') {
+        var _this$graph;
+
+        (_this$graph = _this.graph) === null || _this$graph === void 0 ? void 0 : _this$graph.zoom(factor);
+      } else if (factor === 'fit') {
+        var _this$graph2;
+
+        (_this$graph2 = _this.graph) === null || _this$graph2 === void 0 ? void 0 : _this$graph2.zoomToFit({
+          padding: 12
+        });
+      } else if (factor === 'real') {
+        var _this$graph3, _this$graph4;
+
+        (_this$graph3 = _this.graph) === null || _this$graph3 === void 0 ? void 0 : _this$graph3.scale(1);
+        (_this$graph4 = _this.graph) === null || _this$graph4 === void 0 ? void 0 : _this$graph4.centerContent();
+      }
+    };
+
+    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.getNodes = function () {
+      var _this$graph5;
+
+      return ((_this$graph5 = _this.graph) === null || _this$graph5 === void 0 ? void 0 : _this$graph5.getNodes()) || [];
+    };
+
+    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.deleteNodes = function (nodes) {
+      var _this$graph6;
+
+      var target = [].concat(nodes); // @ts-ignore
+
+      _this.nodeMetas = _this.nodeMetas.filter(function (nodeMeta) {
+        return !target.includes(nodeMeta.id);
+      });
+      (_this$graph6 = _this.graph) === null || _this$graph6 === void 0 ? void 0 : _this$graph6.removeCells(target);
+    };
+
+    this.deleteEdges = function (edges) {
+      var _this$graph7;
+
+      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$graph7 = _this.graph) === null || _this$graph7 === void 0 ? void 0 : _this$graph7.removeCells(target);
+    };
+
+    this.getNodeById = function (nodeId) {
+      var _this$graph8;
+
+      var node = (_this$graph8 = _this.graph) === null || _this$graph8 === void 0 ? void 0 : _this$graph8.getCellById(nodeId);
+
+      if (node === null || node === void 0 ? void 0 : node.isNode()) {
+        return node;
+      }
+
+      return undefined;
+    };
+
+    this.updateNodeById = function (nodeId, handler) {
+      handler(_this.getNodeById(nodeId));
+    };
+
+    this.updateNodes = function (handler) {
+      handler(_this.getNodes());
+    };
+
+    this.updateEdgeById = function (edgeId, handler) {
+      var _this$graph9;
+
+      var edge = (_this$graph9 = _this.graph) === null || _this$graph9 === void 0 ? void 0 : _this$graph9.getCellById(edgeId);
+
+      if (edge === null || edge === void 0 ? void 0 : edge.isEdge()) {
+        handler(edge);
+      } else {
+        handler(undefined);
+      }
+    };
+
+    this.updateEdges = function (handler) {
+      var _this$graph10;
+
+      var edges = ((_this$graph10 = _this.graph) === null || _this$graph10 === void 0 ? void 0 : _this$graph10.getEdges()) || [];
+      handler(edges);
+    };
+
+    this.throwRenderError = function () {
+      if (!_this.wrapper) {
+        console.warn('Wrapper element is needed.');
+      }
+
+      if (!_this.container) {
+        console.warn('Container element is needed.');
+      }
+
+      if (!_this.nodeMetas) {
+        console.warn('NodeMetas could not be empty');
+      }
+
+      if (!_this.edgeMetas) {
+        console.warn('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;
+      return !!wrapper && !!container;
+    }
+  }, {
+    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: "initFactorySub",
+    value: function initFactorySub() {
+      var _this2 = this;
+
+      // 处理产生连线事件
+      this.factorySub.connectNode = fromEventPattern(function (handler) {
+        _this2.graph.on('edge:connected', handler);
+      }, function (handler) {
+        _this2.graph.off('edge:connected', handler);
+      }).subscribe(function (args) {
+        _this2.onConnectNode(args);
+      }); // 处理节点选中事件
+
+      this.factorySub.selectNode = fromEventPattern(function (handler) {
+        _this2.graph.on('selection:changed', handler);
+      }, function (handler) {
+        _this2.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.factorySub.windowResize = fromEventPattern(function (handler) {
+        window.addEventListener('resize', handler);
+      }, function (handler) {
+        window.removeEventListener('resize', handler);
+      }).subscribe(this.resizeGraph); // 处理连线删除
+
+      this.factorySub.connectionRemoved = fromEventPattern(function (handler) {
+        _this2.graph.on('edge:removed', handler);
+      }, function (handler) {
+        _this2.graph.off('edge:removed', handler);
+      }).subscribe(function (args) {
+        _this2.onConnectionRemoved(args);
+      }); // 处理删除节点或连线事件
+
+      this.factorySub.deleteNodeOrEdge = fromEventPattern(function (handler) {
+        _this2.graph.bindKey(['delete', 'backspace'], handler);
+      }, function () {
+        _this2.graph.unbindKey(['delete', 'backspace']);
+      }).subscribe(function () {
+        var selectedCells = _this2.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
+        });
+      }); // 处理右键菜单
+
+      var nodeContextMenuObs = fromEventPattern(function (handler) {
+        _this2.graph.on('node:contextmenu', function (data) {
+          handler({
+            type: 'node',
+            data: data
+          });
+        });
+      }, function (handler) {
+        _this2.graph.off('node:contextmenu', handler);
+      });
+      var edgeContextMenuObs = fromEventPattern(function (handler) {
+        _this2.graph.on('edge:contextmenu', function (data) {
+          handler({
+            type: 'edge',
+            data: data
+          });
+        });
+      }, function (handler) {
+        _this2.graph.off('edge:contextmenu', handler);
+      });
+      var graphContextMenuObs = fromEventPattern(function (handler) {
+        _this2.graph.on('blank:contextmenu', function (data) {
+          handler({
+            type: 'graph',
+            data: data
+          });
+        });
+      }, function (handler) {
+        _this2.graph.off('edge:contextmenu', handler);
+      });
+      this.factorySub.contextMenu = merge(nodeContextMenuObs, edgeContextMenuObs, graphContextMenuObs).subscribe(function (data) {
+        if (_this2.validateContextMenu(data)) {
+          _this2.onContextMenu(data);
+        }
+      }); // 处理节点移动事件
+
+      var moveStarted = false; // 因为需要对移动事件做分片，区分两次移动事件，所以引入一个记录移动开始的变量
+
+      this.factorySub.moveNodes = fromEventPattern(function (handler) {
+        _this2.graph.on('node:change:position', handler);
+      }, function (handler) {
+        _this2.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);
+      });
+    } // 渲染
+
+  }, {
+    key: "render",
+    value: function render(params) {
+      var _this3 = this;
+
+      this.setMeta(params);
+
+      if (this.isMetaValid) {
+        var wrapper = this.wrapper,
+            options = this.options,
+            nodeMetas = this.nodeMetas,
+            edgeMetas = this.edgeMetas;
+        var width = wrapper.clientWidth;
+        var height = wrapper.clientHeight;
+        var graph = new Graph(_objectSpread(_objectSpread({}, options), {}, {
+          width: width,
+          height: height
+        }));
+        this.graph = graph;
+        nodeMetas.forEach(function (nodeMeta) {
+          return _this3.renderNode(nodeMeta);
+        });
+        edgeMetas.forEach(function (edgeMeta) {
+          return _this3.renderEdge(edgeMeta);
+        });
+        this.afterLayout();
+
+        if (graph.isFrozen()) {
+          graph.unfreeze();
+        }
+
+        requestAnimationFrame(function () {
+          graph.centerContent();
+        });
+        this.initFactorySub();
+      } else {
+        this.throwRenderError();
+      }
+    }
+  }, {
+    key: "renderNode",
+    value: function renderNode(nodeMeta) {
+      return this.graph.addNode(nodeMeta);
+    }
+  }, {
+    key: "renderEdge",
+    value: function renderEdge(edgeMeta) {
+      return this.graph.addEdge(edgeMeta);
+    }
+  }, {
+    key: "afterLayout",
+    value: function afterLayout() {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 连线的触发事件
+
+  }, {
+    key: "onConnectNode",
+    value: function onConnectNode(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 节点选中的触发事件
+
+  }, {
+    key: "onSelectNodes",
+    value: function onSelectNodes(nodes) {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 窗口大小resize触发事件
+
+  }, {
+    key: "onConnectionRemoved",
+    value: // 处理连线删除的触发事件
+    function onConnectionRemoved(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 按下删除键的回调，默认参数为当前选中的节点和边
+
+  }, {
+    key: "onDeleteNodeOrEdge",
+    value: function onDeleteNodeOrEdge(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    }
+  }, {
+    key: "validateContextMenu",
+    value: function validateContextMenu(data) {
+      return !!data;
+    }
+  }, {
+    key: "onContextMenu",
+    value: function onContextMenu(data) {
+      if (process.env.NODE_ENV === 'development') {}
+    } // 缩放画布
+
+  }, {
+    key: "onMoveNodeStart",
+    value: function onMoveNodeStart(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    }
+  }, {
+    key: "onMoveNodes",
+    value: function onMoveNodes(args) {
+      if (process.env.NODE_ENV === 'development') {}
+    }
+    /* 以下为主动触发的方法 */
+
+  }, {
+    key: "dispose",
+    value: // 注销
+    function dispose() {
+      var _this$factorySub$conn, _this$factorySub$move, _this$factorySub$sele;
+
+      (_this$factorySub$conn = this.factorySub.connectNode) === null || _this$factorySub$conn === void 0 ? void 0 : _this$factorySub$conn.unsubscribe();
+      (_this$factorySub$move = this.factorySub.moveNodes) === null || _this$factorySub$move === void 0 ? void 0 : _this$factorySub$move.unsubscribe();
+      (_this$factorySub$sele = this.factorySub.selectNode) === null || _this$factorySub$sele === void 0 ? void 0 : _this$factorySub$sele.unsubscribe(); // ! 这一步要注意放在图的事件订阅都取消了之后
+
+      if (this.wrapper) {
+        var _this$graph11;
+
+        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$graph11 = this.graph) === null || _this$graph11 === void 0 ? void 0 : _this$graph11.dispose();
+      }
+    }
+  }]);
+
+  return GraphCore;
+}();
+
+function setCellsSelectedStatus(cells, selected) {
+  cells.forEach(function (cell) {
+    var data = cell.getData() || {};
+    cell.setData(_objectSpread(_objectSpread({}, data), {}, {
+      selected: selected
+    }));
+  });
+}

package/es/framework/hooks/use-async-memo.js

@@ -0,0 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-21 11:04:53
+ * @LastEditTime: 2022-05-21 11:07:34
+ */
+import { useEffect, useState } from 'react';
+export function useAsyncMemo(factory, deps, initial) {
+  var _useState = useState(initial),
+      _useState2 = _slicedToArray(_useState, 2),
+      val = _useState2[0],
+      setVal = _useState2[1];
+
+  useEffect(function () {
+    var cancel = false;
+    var promise = factory();
+
+    if (promise) {
+      promise.then(function (val) {
+        if (!cancel) {
+          setVal(val);
+        }
+      });
+    }
+
+    return function () {
+      cancel = true;
+    };
+  }, deps);
+  return val;
+}

package/es/framework/hooks/use-sync-scroll.js

@@ -0,0 +1,106 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-06-24 08:44:41
+ * @LastEditTime: 2022-06-24 16:25:38
+ */
+import React from 'react';
+
+function syncScroll(target, others, TopLeft, WidthHeight) {
+  var percentage = target["scroll".concat(TopLeft)] / (target["scroll".concat(WidthHeight)] - target["offset".concat(WidthHeight)]);
+  window.requestAnimationFrame(function () {
+    others.forEach(function (el) {
+      el["scroll".concat(TopLeft)] = Math.round(percentage * (el["scroll".concat(WidthHeight)] - el["offset".concat(WidthHeight)]));
+    });
+  });
+}
+
+function syncVerticalScroll(target, others) {
+  syncScroll(target, others, 'Top', 'Height');
+}
+
+function syncHorizontalScroll(target, others) {
+  syncScroll(target, others, 'Left', 'Width');
+}
+
+export default function useSyncScroll(_ref) {
+  var vertical = _ref.vertical,
+      horizontal = _ref.horizontal;
+  var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  var refsRef = React.useRef([]);
+  var locksRef = React.useRef(0);
+  React.useEffect(function () {
+    if (refsRef.current.length < 2) return function () {};
+
+    function handleScroll(_ref2) {
+      var target = _ref2.target;
+
+      if (locksRef.current > 0) {
+        locksRef.current -= 1;
+        return;
+      }
+
+      locksRef.current = refsRef.current.length - 1;
+      var others = refsRef.current.filter(function (ref) {
+        return ref !== target;
+      });
+      if (vertical) syncVerticalScroll(target, others);
+      if (horizontal) syncHorizontalScroll(target, others);
+    }
+
+    var elements = refsRef.current;
+    elements.forEach(function (el) {
+      return el.addEventListener('scroll', handleScroll);
+    });
+    return function () {
+      elements.forEach(function (el) {
+        return el.removeEventListener('scroll', handleScroll);
+      });
+    };
+  }, [refsRef, vertical, horizontal, locksRef].concat(_toConsumableArray(deps)));
+  return function (ref) {
+    return refsRef.current.push(ref);
+  };
+}
+export function useSyncScrollByRefs(refsRef, _ref3) {
+  var vertical = _ref3.vertical,
+      horizontal = _ref3.horizontal;
+  var deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  var refsRefOk = refsRef && refsRef.current && refsRef.current.length > 1;
+  var locksRef = React.useRef(0);
+  React.useEffect(function () {
+    if (!refsRefOk) return function () {};
+
+    function handleScroll(_ref4) {
+      var target = _ref4.target;
+
+      if (locksRef.current > 0) {
+        locksRef.current -= 1;
+        return;
+      }
+
+      locksRef.current = refsRef.current.length - 1;
+      var others = refsRef.current.reduce(function (result, ref) {
+        if (ref.current && ref.current !== target) result.push(ref.current);
+        return result;
+      }, []);
+      if (vertical) syncVerticalScroll(target, others);
+      if (horizontal) syncHorizontalScroll(target, others);
+    }
+
+    var elements = refsRef.current.reduce(function (result, ref) {
+      if (ref.current) result.push(ref.current);
+      return result;
+    }, []);
+    elements.forEach(function (el) {
+      return el.addEventListener('scroll', handleScroll);
+    });
+    return function () {
+      elements.forEach(function (el) {
+        return el.removeEventListener('scroll', handleScroll);
+      });
+    };
+  }, [refsRef, refsRefOk, vertical, horizontal, locksRef].concat(_toConsumableArray(deps)));
+  return refsRefOk;
+}