ronds-metadata 1.1.7 → 1.1.8

package/es/comps/DynamicPorts/index.js

@@ -1,187 +1,141 @@
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
 /*
  * @Author: wangxian
  * @Date: 2022-05-16 18:53:31
- * @LastEditTime: 2022-05-24 12:09:46
+ * @LastEditTime: 2022-05-27 14:24:06
  */
-import { Graph, Markup } from '@antv/x6';
 import React from 'react';
-import NodeElement from './comps/NodeElement';
-import { DPGroupEdge } from './comps/shape/edge';
-import { DPNode } from './comps/shape/node';
-import ReactDOM from 'react-dom';
+import { filter } from 'rxjs';
+import { useDrop } from 'react-dnd';
 import "./index.css";
 import './comps/shape/connector';
+import { useDPGraph, useUnmountDPGraph } from './graph';
+import { DRAGGABLE_COMPONENT, DRAGGABLE_MODEL } from './constant';
+import { guid } from '../../utils';
+import ContextMenu from './comps/ContextMenu';
+import { GraphHandler } from './comps/GraphHandler';
 
-var DynamicPorts = function DynamicPorts() {
+var DynamicPorts = function DynamicPorts(props) {
+  var defaultValue = props.defaultValue,
+      onChange = props.onChange,
+      onNodeSelect = props.onNodeSelect;
   var divRef = React.useRef(null);
+  var containerRef = React.useRef(null);
+
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      dpGraph = _React$useState2[0],
+      setGraph = _React$useState2[1];
+
+  var dpGraphRef = React.useRef();
+  var firstLoadRef = React.useRef(true); // 处理画布卸载
+
+  useUnmountDPGraph(); // 渲染画布
+
   React.useEffect(function () {
-    if (divRef.current !== null) {
-      var graph = new Graph({
-        container: divRef.current,
-        grid: true,
-        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.description,
-              placement: placement
-            }, /*#__PURE__*/React.createElement("div", {
-              className: "dp-port".concat(port.connected ? '.connected' : '')
-            })), container);
-          }
-        }
+    if (firstLoadRef.current) {
+      var _dpGraph = useDPGraph(defaultValue);
+
+      dpGraphRef.current = _dpGraph;
+      setGraph(_dpGraph);
+
+      _dpGraph.renderGraph(containerRef.current, divRef.current); // 获取图信息的订阅
+
+
+      _dpGraph.factory$.dpGraph.pipe(filter(function (x) {
+        return !!x;
+      })).subscribe(function (v) {
+        onChange && onChange(v);
+      }); // 获取选中节点的订阅
+
+
+      _dpGraph.factory$.selectedNodes.subscribe(function (v) {
+        onNodeSelect && onNodeSelect(v[0]);
       });
-      graph.addNode(new DPNode({
-        id: '1',
-        x: 40,
-        y: 35,
-        ports: {
-          items: [{
-            group: 'in',
-            id: 'in11'
-          }, {
-            group: 'in',
-            id: 'in22'
-          }, {
-            group: 'out',
-            id: 'out11'
-          }, {
-            group: 'out',
-            id: 'out22'
-          }]
-        },
-        data: {
-          id: '1',
-          name: '算法'
-        },
-        shape: 'rz-rect-port',
-        component: /*#__PURE__*/React.createElement(NodeElement, null)
-      }));
-      graph.addNode(new DPNode({
-        id: '2',
-        x: 300,
-        y: 35,
-        ports: {
-          items: [{
-            group: 'in',
-            id: 'in1',
-            connected: true
-          }, {
-            group: 'in',
-            id: 'in2'
-          }, {
-            group: 'out',
-            id: 'out1'
-          }, {
-            group: 'out',
-            id: 'out2'
-          }]
-        },
-        data: {
-          id: '2',
-          name: 'Kafka数据源'
-        },
-        shape: 'rz-rect-port',
-        component: /*#__PURE__*/React.createElement(NodeElement, null)
-      }));
-      graph.addEdge(new DPGroupEdge({
-        sourceAnchor: 'bottom',
-        source: {
-          cell: '1',
-          port: 'out11',
-          anchor: {
-            name: 'bottom'
-          }
-        },
-        target: {
-          cell: '2',
-          port: 'in1',
-          anchor: {
-            name: 'center'
-          }
-        },
-        zIndex: 1
-      }));
+
+      firstLoadRef.current = false;
+    }
+  }, []); // 处理组件拖拽落下事件
+
+  var _useDrop = useDrop({
+    accept: [DRAGGABLE_COMPONENT, DRAGGABLE_MODEL],
+    drop: function drop(item, monitor) {
+      var currentMouseOffset = monitor.getClientOffset();
+      var sourceMouseOffset = monitor.getInitialClientOffset();
+      var sourceElementOffset = monitor.getInitialSourceClientOffset();
+      var diffX = sourceMouseOffset.x - sourceElementOffset.x;
+      var diffY = sourceMouseOffset.y - sourceElementOffset.y;
+      var x = currentMouseOffset.x - diffX;
+      var y = currentMouseOffset.y - diffY;
+
+      if (dpGraphRef.current.isGraphReady()) {
+        dpGraphRef.current.addDragNode(_objectSpread(_objectSpread({}, item.comp), {}, {
+          libId: item.comp.id,
+          id: guid(),
+          x: x,
+          y: y
+        }));
+      } else {
+        console.warn('请稍后再尝试添加节点');
+      }
     }
-  }, []);
+  }),
+      _useDrop2 = _slicedToArray(_useDrop, 2),
+      dropRef = _useDrop2[1]; // 画布侧边 toolbar handler
+
+
+  var onHandleSideToolbar = React.useCallback(function (action) {
+    return function () {
+      // 确保画布已渲染
+      if (dpGraphRef.current.isGraphReady()) {
+        switch (action) {
+          case 'in':
+            dpGraphRef.current.zoomGraph(0.1);
+            break;
+
+          case 'out':
+            dpGraphRef.current.zoomGraph(-0.1);
+            break;
+
+          case 'fit':
+            dpGraphRef.current.zoomGraphToFit();
+            break;
+
+          case 'real':
+            dpGraphRef.current.zoomGraphRealSize();
+            break;
+
+          default:
+        }
+      }
+    };
+  }, [dpGraph]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: function ref(elem) {
+      containerRef.current = elem;
+      dropRef(elem);
+    },
+    className: "dynamic-ports",
+    style: {
+      height: '100%',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(ContextMenu, {
+    graph: dpGraph
+  }), /*#__PURE__*/React.createElement(GraphHandler, {
+    onZoomIn: onHandleSideToolbar('in'),
+    onZoomOut: onHandleSideToolbar('out'),
+    onFitContent: onHandleSideToolbar('fit'),
+    onRealContent: onHandleSideToolbar('real')
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
-      width: '100%',
-      height: '100%'
+      height: '100%',
+      width: '100%'
     },
     ref: divRef
-  }));
+  })));
 };
 
-export default DynamicPorts;
-var testNode = {
-  x: 40,
-  y: 35,
-  width: 160,
-  height: 30,
-  label: 'Hello',
-  attrs: {
-    body: {
-      strokeWidth: 1,
-      stroke: '#108ee9',
-      fill: '#fff',
-      rx: 5,
-      ry: 5
-    }
-  },
-  portMarkup: [Markup.getForeignObjectMarkup()],
-  ports: {
-    items: [{
-      group: 'in',
-      id: 'in1'
-    }, {
-      group: 'in',
-      id: 'in2'
-    }, {
-      group: 'out',
-      id: 'out1'
-    }, {
-      group: 'out',
-      id: 'out2'
-    }],
-    groups: {
-      in: {
-        position: {
-          name: 'top'
-        },
-        attrs: {
-          fo: {
-            width: 10,
-            height: 10,
-            x: -5,
-            y: -5,
-            magnet: 'true'
-          }
-        },
-        zIndex: 1
-      },
-      out: {
-        position: {
-          name: 'bottom'
-        },
-        attrs: {
-          fo: {
-            width: 10,
-            height: 10,
-            x: -5,
-            y: -5,
-            magnet: 'true'
-          }
-        },
-        zIndex: 1
-      }
-    }
-  }
-};
+export default DynamicPorts;

package/es/comps/DynamicPorts/interface.d.ts

@@ -0,0 +1,34 @@
+export declare namespace NDPGraph {
+    interface GraphData {
+        nodes: Node[];
+        edges: Edge[];
+    }
+    interface Node {
+        id: string;
+        libId?: string;
+        name: string;
+        inPorts: InPort[];
+        outPorts: OutPort[];
+        x: number;
+        y: number;
+        param?: Param;
+    }
+    interface Edge {
+        source: string;
+        target: string;
+        outPortId: string;
+        inPortId: string;
+    }
+    interface OutPort extends Port {
+    }
+    interface InPort extends Port {
+    }
+    interface Port {
+        id: string;
+        name: string;
+        seq: number;
+    }
+    interface Param {
+        [key: string]: any;
+    }
+}

package/es/comps/DynamicPorts/interface.js

@@ -0,0 +1,6 @@
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 16:10:46
+ * @LastEditTime: 2022-05-26 10:47:42
+ */
+export {};

package/es/comps/DynamicPorts/utils.d.ts

@@ -0,0 +1,100 @@
+import { NDPGraph } from './interface';
+import { Graph } from '@antv/x6';
+export declare function graphPointToOffsetPoint(graph: Graph, graphPoint: {
+    x: number;
+    y: number;
+}, containerElem: HTMLElement): {
+    x: number;
+    y: number;
+};
+export declare function formatNodeInfoToNodeMeta(nodeData: NDPGraph.Node, inputPortConnectedMap?: {
+    [k: string]: boolean;
+}): {
+    x: number;
+    y: number;
+    type: string;
+    id: string;
+    width: number;
+    height: number;
+    data: {
+        type: string;
+        x: number;
+        y: number;
+        id: string;
+        libId?: string;
+        name: string;
+        inPorts: NDPGraph.InPort[];
+        outPorts: NDPGraph.OutPort[];
+        param?: NDPGraph.Param;
+    };
+    ports: {
+        items: any[];
+    };
+    zIndex: number;
+    libId?: string;
+    name: string;
+    inPorts: NDPGraph.InPort[];
+    outPorts: NDPGraph.OutPort[];
+    param?: NDPGraph.Param;
+};
+/**
+ * 将暴露给接口的图信息转换可渲染的结图结构信息
+ * @returns
+ */
+export declare function formatGraphData(graphData: NDPGraph.GraphData): {
+    nodes: {
+        x: number;
+        y: number;
+        type: string;
+        id: string;
+        width: number;
+        height: number;
+        data: {
+            type: string;
+            x: number;
+            y: number;
+            id: string;
+            libId?: string;
+            name: string;
+            inPorts: NDPGraph.InPort[];
+            outPorts: NDPGraph.OutPort[];
+            param?: NDPGraph.Param;
+        };
+        ports: {
+            items: any[];
+        };
+        zIndex: number;
+        libId?: string;
+        name: string;
+        inPorts: NDPGraph.InPort[];
+        outPorts: NDPGraph.OutPort[];
+        param?: NDPGraph.Param;
+    }[];
+    edges: {
+        data: {
+            source: string;
+            target: string;
+            outPortId: string;
+            inPortId: string;
+        };
+        sourceAnchor: string;
+        source: {
+            cell: string;
+            port: string;
+            anchor: {
+                name: string;
+            };
+        };
+        target: {
+            cell: string;
+            port: string;
+            anchor: {
+                name: string;
+            };
+        };
+        label: string;
+        zIndex: number;
+        outPortId: string;
+        inPortId: string;
+    }[];
+};

package/es/comps/DynamicPorts/utils.js

@@ -0,0 +1,127 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 16:40:49
+ * @LastEditTime: 2022-05-27 16:02:48
+ */
+import { sortBy } from 'lodash-es';
+import { NODE_HEIGHT, NODE_WIDTH } from './constant'; // 将画布上的点转换成相对于 offset parent 的点
+
+export function graphPointToOffsetPoint(graph, graphPoint, containerElem) {
+  if (graph) {
+    var point = graph.localToPage({
+      x: graphPoint.x,
+      y: graphPoint.y
+    });
+    var clientRect = containerElem === null || containerElem === void 0 ? void 0 : containerElem.getBoundingClientRect();
+    var y = point.y - ((clientRect === null || clientRect === void 0 ? void 0 : clientRect.y) || 0); // ! offset parent 不能是画布容器，否则会影响内部布局，所以 offset parent 在外部，算上上方 toolbar 的高度
+
+    var x = point.x - ((clientRect === null || clientRect === void 0 ? void 0 : clientRect.x) || 0);
+    return {
+      x: x,
+      y: y
+    };
+  }
+
+  return {
+    x: 0,
+    y: 0
+  };
+} // 格式化单个节点，新增节点时复用
+
+export function formatNodeInfoToNodeMeta(nodeData) {
+  var inputPortConnectedMap = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var portItems = [];
+  var id = nodeData.id,
+      _nodeData$x = nodeData.x,
+      x = _nodeData$x === void 0 ? 0 : _nodeData$x,
+      _nodeData$y = nodeData.y,
+      y = _nodeData$y === void 0 ? 0 : _nodeData$y,
+      inPorts = nodeData.inPorts,
+      outPorts = nodeData.outPorts;
+  sortBy(inPorts, 'seq').forEach(function (inPort) {
+    portItems.push(_objectSpread(_objectSpread({}, inPort), {}, {
+      group: 'in',
+      id: inPort.id.toString(),
+      connected: !!inputPortConnectedMap[inPort.id.toString()]
+    }));
+  });
+  sortBy(outPorts, 'seq').forEach(function (outPort) {
+    portItems.push(_objectSpread(_objectSpread({}, outPort), {}, {
+      group: 'out',
+      id: outPort.id.toString(),
+      connected: !!inputPortConnectedMap[outPort.id.toString()]
+    }));
+  });
+  return _objectSpread(_objectSpread({}, nodeData), {}, {
+    x: x,
+    y: y,
+    type: 'node',
+    id: id.toString(),
+    width: NODE_WIDTH,
+    height: NODE_HEIGHT,
+    data: _objectSpread(_objectSpread({}, nodeData), {}, {
+      type: 'node',
+      x: x,
+      y: y,
+      id: id.toString()
+    }),
+    ports: {
+      items: portItems
+    },
+    zIndex: 10
+  });
+}
+/**
+ * 将暴露给接口的图信息转换可渲染的结图结构信息
+ * @returns
+ */
+
+export function formatGraphData(graphData) {
+  var _graphData$nodes = graphData.nodes,
+      nodes = _graphData$nodes === void 0 ? [] : _graphData$nodes,
+      _graphData$edges = graphData.edges,
+      edges = _graphData$edges === void 0 ? [] : _graphData$edges; // 格式化边
+
+  var formattedEdges = edges.map(function (edges) {
+    var source = edges.source,
+        outPortId = edges.outPortId,
+        target = edges.target,
+        inPortId = edges.inPortId;
+    return _objectSpread(_objectSpread({}, edges), {}, {
+      data: _objectSpread({}, edges),
+      sourceAnchor: 'bottom',
+      source: {
+        cell: source.toString(),
+        port: outPortId.toString(),
+        anchor: {
+          name: 'bottom'
+        }
+      },
+      target: {
+        cell: target.toString(),
+        port: inPortId.toString(),
+        anchor: {
+          name: 'center'
+        }
+      },
+      label: '',
+      zIndex: 1
+    });
+  }); // 记录所有已连线的输入桩
+
+  var inputPortConnectedMap = formattedEdges.reduce(function (acc, edge) {
+    acc[edge.inPortId] = true;
+    return acc;
+  }, {}); // 格式化算法组件节点
+
+  var formattedNodes = nodes.map(function (nodeData) {
+    return formatNodeInfoToNodeMeta(nodeData, inputPortConnectedMap);
+  });
+  return {
+    nodes: _toConsumableArray(formattedNodes),
+    edges: formattedEdges
+  };
+}

package/es/comps/MetadataForm/DataCell/layout/TableArray.js

@@ -1,7 +1,9 @@
 import "antd/es/form/style";
 import _Form from "antd/es/form";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useRef } from 'react';
@@ -10,6 +12,7 @@ import { JsonMetadataProvider } from '../../../../framework/metadata';
 import Editable from '../../../../comps/Editable';
 import useObservable from '../../../../framework/rxjs-hooks/useObservable';
 import { MetadataFormContext } from '../../interface';
+import { getLabelByProps } from '../../utils';
 
 var TableArray = function TableArray(props) {
   var initValue = props.initValue,
@@ -46,31 +49,68 @@ var TableArray = function TableArray(props) {
       setList(_toConsumableArray(p.payload[name]));
     }
   }, [formContext.stream$]);
+  var getSchemaByRefId = React.useCallback( /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(server, __TYPE__) {
+      var _schema, res, provider, FormCls, formCls, _fields;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _schema = []; // 如果有内部类，优先在内部类里面找
+
+              if (__TYPE__.length > 0) {
+                _schema = __TYPE__.filter(function (it) {
+                  return it.id === refId;
+                });
+              } // 内部类找不到 从接口里面拿
+
+
+              if (!(_schema.length === 0)) {
+                _context.next = 7;
+                break;
+              }
+
+              _context.next = 5;
+              return server.GetMetadataDetailById(refId);
+
+            case 5:
+              res = _context.sent;
+
+              if (res === null || res === void 0 ? void 0 : res.schema) {
+                _schema = JSON.parse(res === null || res === void 0 ? void 0 : res.schema);
+              }
+
+            case 7:
+              provider = new JsonMetadataProvider();
+
+              if (_schema.length > 0) {
+                provider.add_types(_schema);
+                FormCls = provider.get_type(_schema[0].id);
+                formCls = new FormCls();
+                _fields = formCls.__type__.__fields__;
+                refFieldsRef.current = _fields;
+                setRefFields(_objectSpread({}, _fields));
+                setSchema(_toConsumableArray(_schema));
+                setDefaultValue(_objectSpread({}, JSON.parse(JSON.stringify(formCls))));
+              }
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }(), [refId]);
   React.useEffect(function () {
     if (refId) {
       var server = new MetadataService();
-      server.GetMetadataDetailById(refId).then(function (res) {
-        var provider = new JsonMetadataProvider();
-
-        if (res === null || res === void 0 ? void 0 : res.schema) {
-          var mySchema = JSON.parse(res.schema);
-          provider.add_types(mySchema);
-          var FormCls = provider.get_type(mySchema[0].id);
-          var formCls = new FormCls();
-          var _fields = formCls.__type__.__fields__;
-          refFieldsRef.current = _fields;
-          setRefFields(_objectSpread({}, _fields));
-          setSchema(_toConsumableArray(mySchema));
-          setDefaultValue(_objectSpread({}, JSON.parse(JSON.stringify(formCls))));
-          return function () {
-            provider = null;
-          };
-        }
-
-        return function () {
-          provider = null;
-        };
-      });
+      getSchemaByRefId(server, formContext.__TYPE__);
       return function () {
         server = null;
       };
@@ -88,11 +128,9 @@ var TableArray = function TableArray(props) {
     var _columns = [];
 
     for (var i = 0; i < _properties.length; i++) {
-      var _it$fields$0$value, _it$fields$0$value$co, _it$fields$0$value2;
-
       var it = _properties[i];
       var obj = {
-        title: (it === null || it === void 0 ? void 0 : (_it$fields$0$value = it.fields[0].value) === null || _it$fields$0$value === void 0 ? void 0 : (_it$fields$0$value$co = _it$fields$0$value.common) === null || _it$fields$0$value$co === void 0 ? void 0 : _it$fields$0$value$co.label) || (it === null || it === void 0 ? void 0 : (_it$fields$0$value2 = it.fields[0].value) === null || _it$fields$0$value2 === void 0 ? void 0 : _it$fields$0$value2.label) || it.id,
+        title: getLabelByProps(it),
         key: it.id,
         dataIndex: it.id,
         width: 100,