ronds-metadata 1.2.10 → 1.2.11

package/es/comps/DynamicPorts/graph.js

@@ -0,0 +1,697 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import produce from 'immer';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { filter, take } from 'rxjs/operators';
+import { round } from 'lodash-es';
+import { GraphCore } from '../../framework/graph';
+import NodeElement from './comps/NodeElement';
+import { DPEdge } from './comps/shape/edge';
+import { DPNode } from './comps/shape/node';
+import { formatGraphData, formatNodeInfoToNodeMeta } from './utils';
+
+var DPGraph = /*#__PURE__*/function (_GraphCore) {
+  _inherits(DPGraph, _GraphCore);
+
+  var _super = _createSuper(DPGraph);
+
+  // 图数据的订阅
+  function DPGraph(_graphData) {
+    var _thisSuper, _this;
+
+    _classCallCheck(this, DPGraph);
+
+    _this = _super.call(this, {
+      history: true,
+      frozen: true,
+      grid: true,
+      selecting: {
+        enabled: true,
+        rubberband: false,
+        multiple: true,
+        strict: true,
+        showNodeSelectionBox: false,
+        selectNodeOnMoved: false
+      },
+      keyboard: {
+        enabled: true
+      },
+      connecting: {
+        snap: {
+          radius: 10
+        },
+        allowBlank: false,
+        highlight: true,
+        connector: 'pai',
+        sourceAnchor: 'bottom',
+        targetAnchor: 'center',
+        connectionPoint: 'anchor',
+        createEdge: function createEdge() {
+          return new DPEdge({
+            attrs: {
+              line: {
+                strokeDasharray: '5 5',
+                stroke: '#808080',
+                strokeWidth: 1,
+                targetMarker: {
+                  name: 'block',
+                  args: {
+                    size: '6'
+                  }
+                }
+              }
+            }
+          });
+        },
+        validateEdge: function validateEdge(args) {
+          var _edge$target;
+
+          var edge = args.edge;
+          return !!(edge === null || edge === void 0 ? void 0 : (_edge$target = edge.target) === null || _edge$target === void 0 ? void 0 : _edge$target.port);
+        },
+        // 是否触发交互事件
+        validateMagnet: function validateMagnet(_ref) {
+          var magnet = _ref.magnet;
+          return magnet.getAttribute('port-group') !== 'in';
+        },
+        // 显示可用的链接桩
+        validateConnection: function validateConnection(_ref2) {
+          var sourceView = _ref2.sourceView,
+              targetView = _ref2.targetView,
+              sourceMagnet = _ref2.sourceMagnet,
+              targetMagnet = _ref2.targetMagnet;
+
+          // 不允许连接到自己
+          if (sourceView === targetView) {
+            return false;
+          } // 只能从输出链接桩创建连接
+
+
+          if (!sourceMagnet || sourceMagnet.getAttribute('port-group') === 'in') {
+            return false;
+          } // 只能连接到输入链接桩
+
+
+          if (!targetMagnet || targetMagnet.getAttribute('port-group') !== 'in') {
+            return false;
+          } // 判断目标链接桩是否可连接
+
+
+          var portId = targetMagnet.getAttribute('port');
+          var node = targetView.cell;
+          var port = node.getPort(portId);
+          return !(port && port.connected);
+        }
+      },
+      scroller: {
+        enabled: true,
+        pageVisible: false,
+        pageBreak: false,
+        pannable: true
+      },
+      highlighting: {
+        nodeAvailable: {
+          name: 'className',
+          args: {
+            className: 'available'
+          }
+        },
+        magnetAvailable: {
+          name: 'className',
+          args: {
+            className: 'available'
+          }
+        },
+        magnetAdsorbed: {
+          name: 'className',
+          args: {
+            className: 'adsorbed'
+          }
+        }
+      },
+      onPortRendered: function onPortRendered(args) {
+        var port = args.port;
+        var contentSelectors = args.contentSelectors;
+        var container = contentSelectors && contentSelectors.content;
+        var placement = port.group === 'in' ? 'top' : 'bottom';
+
+        if (container) {
+          ReactDOM.render( /*#__PURE__*/React.createElement(_Tooltip, {
+            title: port.name,
+            placement: placement
+          }, /*#__PURE__*/React.createElement("span", {
+            className: "dp-port ".concat(port.connected ? 'connected' : '')
+          })), container);
+        }
+      }
+    });
+    _this.factory$ = {
+      loading: new BehaviorSubject(false),
+      dpGraph: new BehaviorSubject(null),
+      selectedNodes: new BehaviorSubject([]),
+      contextMenuInfo: new BehaviorSubject(null)
+    };
+    _this.dpGraphSub = void 0;
+
+    _this.renderGraph = function (wrapper, container) {
+      _this.dpGraphSub = _this.factory$.dpGraph.pipe(filter(function (x) {
+        return !!x;
+      }), // 过滤出有效数据
+      take(1)).subscribe(function (graphData) {
+        if (!_this.graph) {
+          var _formatGraphData = formatGraphData(graphData),
+              nodes = _formatGraphData.nodes,
+              edges = _formatGraphData.edges;
+
+          _get((_thisSuper = _assertThisInitialized(_this), _getPrototypeOf(DPGraph.prototype)), "render", _thisSuper).call(_thisSuper, {
+            wrapper: wrapper,
+            container: container,
+            nodes: nodes,
+            edges: edges
+          });
+        }
+      });
+    };
+
+    _this.renderGraphData = /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(graphData) {
+        var oldGraph, _formatGraphData2, nodes, edges;
+
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                // 清除已有的图谱
+                oldGraph = _this.factory$.dpGraph.getValue();
+
+                _this.deleteNodes(oldGraph.nodes.map(function (it) {
+                  return it.id;
+                }));
+
+                _formatGraphData2 = formatGraphData(graphData), nodes = _formatGraphData2.nodes, edges = _formatGraphData2.edges;
+                nodes.forEach(function (nodeMeta) {
+                  return _this.renderNode(nodeMeta);
+                });
+                edges.forEach(function (edgeMeta) {
+                  return _this.renderEdge(edgeMeta);
+                });
+
+                _this.loadDPGraph(graphData);
+
+              case 6:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function (_x) {
+        return _ref3.apply(this, arguments);
+      };
+    }();
+
+    _this.zoomGraph = function (factor) {
+      _this.zoom(factor);
+    };
+
+    _this.zoomGraphToFit = function () {
+      _this.zoom('fit');
+    };
+
+    _this.zoomGraphRealSize = function () {
+      _this.zoom('real');
+    };
+
+    _this.onDeleteNodes = function (ids) {
+      var nodeInstanceIds = [].concat(ids);
+
+      if (_this.graph && nodeInstanceIds.length) {
+        _this.deleteNodes(nodeInstanceIds);
+
+        _this.delDPGraphElement(nodeInstanceIds, []);
+      }
+    };
+
+    _this.onDeleteEdges = function (edges) {
+      var targetEdges = [].concat(edges);
+
+      _this.deleteEdges(targetEdges);
+
+      _this.delDPGraphElement([], targetEdges.map(function (cell) {
+        return cell.getData();
+      }));
+    };
+
+    _this.clearContextMenuInfo = function () {
+      _this.factory$.contextMenuInfo.next(null);
+    };
+
+    _this.initialize(_graphData);
+
+    return _this;
+  } // 获取实验和图及执行状态信息
+
+
+  _createClass(DPGraph, [{
+    key: "initialize",
+    value: function () {
+      var _initialize = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(graphData) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) {
+            switch (_context2.prev = _context2.next) {
+              case 0:
+                this.factory$.loading.next(true);
+                _context2.prev = 1;
+                _context2.next = 4;
+                return this.loadDPGraph(graphData || {
+                  nodes: [],
+                  edges: []
+                });
+
+              case 4:
+                this.factory$.loading.next(false);
+                _context2.next = 11;
+                break;
+
+              case 7:
+                _context2.prev = 7;
+                _context2.t0 = _context2["catch"](1);
+                this.factory$.loading.next(false);
+                console.error('加载实验错误', _context2.t0);
+
+              case 11:
+              case "end":
+                return _context2.stop();
+            }
+          }
+        }, _callee2, this, [[1, 7]]);
+      }));
+
+      function initialize(_x2) {
+        return _initialize.apply(this, arguments);
+      }
+
+      return initialize;
+    }() // 获取图
+
+  }, {
+    key: "loadDPGraph",
+    value: function () {
+      var _loadDPGraph = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(graphData) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) {
+            switch (_context3.prev = _context3.next) {
+              case 0:
+                this.factory$.dpGraph.next(graphData);
+
+              case 1:
+              case "end":
+                return _context3.stop();
+            }
+          }
+        }, _callee3, this);
+      }));
+
+      function loadDPGraph(_x3) {
+        return _loadDPGraph.apply(this, arguments);
+      }
+
+      return loadDPGraph;
+    }() // 判断画布是否准备完成
+
+  }, {
+    key: "isGraphReady",
+    value: function isGraphReady() {
+      return !!this.graph;
+    } // 渲染画布
+
+  }, {
+    key: "renderNode",
+    value: // 渲染节点
+    function renderNode(nodeMeta) {
+      var data = nodeMeta.data;
+      var type = data.type;
+
+      if (type === 'node') {
+        var node = this.graph.addNode(new DPNode(_objectSpread(_objectSpread({}, nodeMeta), {}, {
+          shape: 'dp-rect-port',
+          component: /*#__PURE__*/React.createElement(NodeElement, null)
+        })));
+        return node;
+      }
+
+      return undefined;
+    } // 渲染连线
+
+  }, {
+    key: "renderEdge",
+    value: function renderEdge(edgeMeta) {
+      return this.graph.addEdge(new DPEdge(edgeMeta));
+    } // 外部添加拖拽节点
+
+  }, {
+    key: "addDragNode",
+    value: function addDragNode(data) {
+      var graph = this.graph;
+
+      if (graph) {
+        var pos = this.graph.clientToLocal(data.x, data.y);
+
+        var _node = _objectSpread(_objectSpread({}, data), pos);
+
+        this.updateDPGraph([_node]);
+        var newNode = formatNodeInfoToNodeMeta(_node);
+        this.addNode(newNode);
+      }
+    } // 更新图信息
+
+  }, {
+    key: "updateDPGraph",
+    value: function () {
+      var _updateDPGraph = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+        var nodes,
+            edges,
+            oldGraph,
+            newGraph,
+            _args4 = arguments;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) {
+            switch (_context4.prev = _context4.next) {
+              case 0:
+                nodes = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : [];
+                edges = _args4.length > 1 && _args4[1] !== undefined ? _args4[1] : [];
+                oldGraph = this.factory$.dpGraph.getValue();
+                newGraph = produce(oldGraph, function (nextGraph) {
+                  if (nodes.length) {
+                    var _nextGraph$nodes;
+
+                    (_nextGraph$nodes = nextGraph.nodes).push.apply(_nextGraph$nodes, _toConsumableArray(nodes));
+                  }
+
+                  if (edges.length) {
+                    var _nextGraph$edges;
+
+                    (_nextGraph$edges = nextGraph.edges).push.apply(_nextGraph$edges, _toConsumableArray(edges));
+                  }
+                });
+                this.factory$.dpGraph.next(newGraph);
+
+              case 5:
+              case "end":
+                return _context4.stop();
+            }
+          }
+        }, _callee4, this);
+      }));
+
+      function updateDPGraph() {
+        return _updateDPGraph.apply(this, arguments);
+      }
+
+      return updateDPGraph;
+    }() // 删除图信息
+
+  }, {
+    key: "delDPGraphElement",
+    value: function () {
+      var _delDPGraphElement = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+        var nodes,
+            edges,
+            oldGraph,
+            newGraph,
+            _args5 = arguments;
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) {
+            switch (_context5.prev = _context5.next) {
+              case 0:
+                nodes = _args5.length > 0 && _args5[0] !== undefined ? _args5[0] : [];
+                edges = _args5.length > 1 && _args5[1] !== undefined ? _args5[1] : [];
+                oldGraph = this.factory$.dpGraph.getValue();
+                newGraph = produce(oldGraph, function (nextGraph) {
+                  if (nodes.length) {
+                    nextGraph.nodes = oldGraph.nodes.filter(function (node) {
+                      return !nodes.includes(node.id.toString());
+                    });
+                    nextGraph.edges = oldGraph.edges.filter(function (edge) {
+                      return !nodes.find(function (node) {
+                        return [edge.source.toString(), edge.target.toString()].includes(node);
+                      });
+                    });
+                  } else {
+                    nextGraph.edges = oldGraph.edges.filter(function (edge) {
+                      return !edges.find(function (delEdge) {
+                        return delEdge.inPortId.toString() === edge.inPortId.toString() && delEdge.outPortId.toString() === edge.outPortId.toString();
+                      });
+                    });
+                  }
+                });
+                this.factory$.dpGraph.next(newGraph);
+
+              case 5:
+              case "end":
+                return _context5.stop();
+            }
+          }
+        }, _callee5, this);
+      }));
+
+      function delDPGraphElement() {
+        return _delDPGraphElement.apply(this, arguments);
+      }
+
+      return delDPGraphElement;
+    }() // 缩放特定比例
+
+  }, {
+    key: "onConnectNode",
+    value: // 处理连线事件
+    function () {
+      var _onConnectNode = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(args) {
+        var _args$edge, edge, isNew, source, target, node, portId, data;
+
+        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+          while (1) {
+            switch (_context6.prev = _context6.next) {
+              case 0:
+                _args$edge = args.edge, edge = _args$edge === void 0 ? {} : _args$edge, isNew = args.isNew;
+                source = edge.source, target = edge.target;
+
+                if (isNew) {
+                  // 处理边虚线样式更新的问题。
+                  node = args.currentCell;
+                  portId = edge.getTargetPortId();
+
+                  if (node && portId) {
+                    // 触发 port 重新渲染
+                    node.setPortProp(portId, 'connected', true); // 更新连线样式
+
+                    edge.attr({
+                      line: {
+                        strokeDasharray: '',
+                        targetMarker: '',
+                        stroke: '#808080'
+                      }
+                    });
+                    data = {
+                      source: source.cell,
+                      target: target.cell,
+                      outPortId: source.port,
+                      inPortId: target.port
+                    };
+                    edge.setData(data);
+                    this.updateDPGraph([], [data]);
+                  }
+                }
+
+                return _context6.abrupt("return", {
+                  success: true
+                });
+
+              case 4:
+              case "end":
+                return _context6.stop();
+            }
+          }
+        }, _callee6, this);
+      }));
+
+      function onConnectNode(_x4) {
+        return _onConnectNode.apply(this, arguments);
+      }
+
+      return onConnectNode;
+    }() // 处理选择事件
+
+  }, {
+    key: "onSelectNodes",
+    value: function onSelectNodes(nodes) {
+      var selectedNodes = nodes.filter(function (cell) {
+        return cell.isNode() && !cell.isGroup();
+      });
+
+      if (selectedNodes.length === 1) {
+        // 当只选中了一个节点时，激活当前选中项
+        var cell = selectedNodes[0];
+        var nodeData = cell.getData();
+        this.factory$.selectedNodes.next([nodeData]);
+      } else {// todo
+      }
+    } // 处理连线删除事件
+
+  }, {
+    key: "onConnectionRemoved",
+    value: function onConnectionRemoved(args) {
+      try {
+        var edge = args.edge;
+        var target = edge.target;
+        var nodeId = target.cell,
+            portId = target.port;
+
+        if (nodeId) {
+          var targetCell = this.getNodeById(nodeId);
+
+          if (targetCell) {
+            // 触发 port 重新渲染
+            targetCell.setPortProp(portId, 'connected', false);
+          }
+        }
+      } catch (error) {
+        console.warn(error);
+      }
+    } //删除节点
+
+  }, {
+    key: "onDeleteNodeOrEdge",
+    value: // 按下删除键的回调，默认参数为当前选中的节点和边
+    function onDeleteNodeOrEdge(args) {
+      var nodes = args.nodes,
+          edges = args.edges;
+      var normalNodes = nodes.filter(function (node) {
+        return !node.isGroup();
+      });
+
+      if (normalNodes === null || normalNodes === void 0 ? void 0 : normalNodes.length) {
+        this.onDeleteNodes(normalNodes.map(function (node) {
+          return node.id;
+        }));
+      }
+
+      if (edges === null || edges === void 0 ? void 0 : edges.length) {
+        this.onDeleteEdges(edges);
+      }
+    } // 右击菜单
+
+  }, {
+    key: "onContextMenu",
+    value: function onContextMenu(data) {
+      this.factory$.contextMenuInfo.next(data);
+    } // 清空右键菜单信息
+
+  }, {
+    key: "onMoveNodes",
+    value: function () {
+      var _onMoveNodes = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7(movedNodes) {
+        var _this2 = this;
+
+        var targetNodes, newPos, oldGraph, newGraph;
+        return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+          while (1) {
+            switch (_context7.prev = _context7.next) {
+              case 0:
+                targetNodes = movedNodes.filter(function (arg) {
+                  var node = arg.node;
+                  return !node.isGroup();
+                });
+
+                if (targetNodes === null || targetNodes === void 0 ? void 0 : targetNodes.length) {
+                  newPos = targetNodes.map(function (moveNode) {
+                    var current = moveNode.current,
+                        node = moveNode.node;
+                    var x = current.x,
+                        y = current.y;
+                    var id = node.id;
+
+                    _this2.updateNodeById(id, function (node) {
+                      node.setData({
+                        x: x,
+                        y: y
+                      });
+                    });
+
+                    return {
+                      nodeInstanceId: id,
+                      posX: round(x),
+                      posY: round(y)
+                    };
+                  });
+                  oldGraph = this.factory$.dpGraph.getValue();
+                  newGraph = produce(oldGraph, function (nextGraph) {
+                    newPos.forEach(function (position) {
+                      var nodeInstanceId = position.nodeInstanceId,
+                          posX = position.posX,
+                          posY = position.posY;
+                      var matchNode = nextGraph.nodes.find(function (item) {
+                        return item.id.toString() === nodeInstanceId.toString();
+                      });
+
+                      if (matchNode) {
+                        matchNode.x = posX;
+                        matchNode.y = posY;
+                      }
+                    });
+                  });
+                  this.factory$.dpGraph.next(newGraph);
+                }
+
+              case 2:
+              case "end":
+                return _context7.stop();
+            }
+          }
+        }, _callee7, this);
+      }));
+
+      function onMoveNodes(_x5) {
+        return _onMoveNodes.apply(this, arguments);
+      }
+
+      return onMoveNodes;
+    }()
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      _get(_getPrototypeOf(DPGraph.prototype), "dispose", this).call(this);
+    }
+  }]);
+
+  return DPGraph;
+}(GraphCore);
+
+export var gDPGraph;
+export default DPGraph; // 获取图的实例
+
+export var useDPGraph = function useDPGraph(graphData) {
+  gDPGraph = new DPGraph(graphData);
+  return gDPGraph;
+};
+export var useUnmountDPGraph = function useUnmountDPGraph() {
+  React.useEffect(function () {
+    return function () {
+      gDPGraph.dispose();
+    };
+  }, []);
+};