ronds-metadata 1.2.9 → 1.2.10

package/es/comps/DynamicPorts/graph.js

@@ -1,697 +0,0 @@
-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();
-    };
-  }, []);
-};