ronds-metadata 1.1.6 → 1.1.7

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

@@ -0,0 +1,6 @@
+import '../index.less';
+interface NodeElementProps {
+    node?: Node;
+}
+declare const NodeElement: (props: NodeElementProps) => JSX.Element;
+export default NodeElement;

package/es/comps/DynamicPorts/comps/NodeElement.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 08:50:16
+ * @LastEditTime: 2022-05-24 11:58:52
+ */
+import { GlobalOutlined } from '@ant-design/icons';
+import "../index.css";
+
+var NodeElement = function NodeElement(props) {
+  var node = props.node;
+  var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
+  var name = data.name;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "node-element"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'icon'
+  }, /*#__PURE__*/React.createElement(GlobalOutlined, null)), /*#__PURE__*/React.createElement("div", {
+    className: "notation"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "name"
+  }, name))));
+};
+
+export default NodeElement;

package/es/comps/DynamicPorts/comps/shape/connector.d.ts

@@ -0,0 +1 @@
+export {};

package/es/comps/DynamicPorts/comps/shape/connector.js

@@ -0,0 +1,19 @@
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 10:53:37
+ * @LastEditTime: 2022-05-24 10:53:41
+ */
+import { Graph } from '@antv/x6';
+Graph.registerConnector('pai', function (s, t) {
+  var offset = 4;
+  var control = 80;
+  var v1 = {
+    x: s.x,
+    y: s.y + offset + control
+  };
+  var v2 = {
+    x: t.x,
+    y: t.y - offset - control
+  };
+  return "M ".concat(s.x, " ").concat(s.y, "\n       L ").concat(s.x, " ").concat(s.y + offset, "\n       C ").concat(v1.x, " ").concat(v1.y, " ").concat(v2.x, " ").concat(v2.y, " ").concat(t.x, " ").concat(t.y - offset, "\n       L ").concat(t.x, " ").concat(t.y, "\n      ");
+}, true);

package/es/comps/DynamicPorts/comps/shape/edge.css

@@ -0,0 +1,4 @@
+.x6-edge-selected path[stroke-width='1'],
+.x6-edge:hover path[stroke-width='1'] {
+  stroke-width: 3px;
+}

package/es/comps/DynamicPorts/comps/shape/edge.d.ts

@@ -0,0 +1,10 @@
+import { Shape } from '@antv/x6';
+import './edge.less';
+export declare class BaseEdge extends Shape.Edge {
+    isGroupEdge(): boolean;
+}
+export declare class DPEdge extends BaseEdge {
+}
+export declare class DPGroupEdge extends DPEdge {
+    isGroupEdge(): boolean;
+}

package/es/comps/DynamicPorts/comps/shape/edge.js

@@ -0,0 +1,91 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 09:18:34
+ * @LastEditTime: 2022-05-24 10:43:18
+ */
+import { Shape, Edge } from '@antv/x6';
+import "./edge.css";
+export var BaseEdge = /*#__PURE__*/function (_Shape$Edge) {
+  _inherits(BaseEdge, _Shape$Edge);
+
+  var _super = _createSuper(BaseEdge);
+
+  function BaseEdge() {
+    _classCallCheck(this, BaseEdge);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(BaseEdge, [{
+    key: "isGroupEdge",
+    value: // eslint-disable-next-line class-methods-use-this
+    function isGroupEdge() {
+      return false;
+    }
+  }]);
+
+  return BaseEdge;
+}(Shape.Edge);
+export var DPEdge = /*#__PURE__*/function (_BaseEdge) {
+  _inherits(DPEdge, _BaseEdge);
+
+  var _super2 = _createSuper(DPEdge);
+
+  function DPEdge() {
+    _classCallCheck(this, DPEdge);
+
+    return _super2.apply(this, arguments);
+  }
+
+  return DPEdge;
+}(BaseEdge);
+DPEdge.config({
+  shape: 'DPEdge',
+  connector: {
+    name: 'pai'
+  },
+  zIndex: 2,
+  attrs: {
+    line: {
+      stroke: '#808080',
+      strokeWidth: 1,
+      targetMarker: {
+        stroke: 'none',
+        fill: 'none'
+      }
+    }
+  }
+});
+export var DPGroupEdge = /*#__PURE__*/function (_DPEdge) {
+  _inherits(DPGroupEdge, _DPEdge);
+
+  var _super3 = _createSuper(DPGroupEdge);
+
+  function DPGroupEdge() {
+    _classCallCheck(this, DPGroupEdge);
+
+    return _super3.apply(this, arguments);
+  }
+
+  _createClass(DPGroupEdge, [{
+    key: "isGroupEdge",
+    value: // eslint-disable-next-line class-methods-use-this
+    function isGroupEdge() {
+      return true;
+    }
+  }]);
+
+  return DPGroupEdge;
+}(DPEdge);
+DPGroupEdge.config({
+  shape: 'DPGroupEdge'
+});
+Edge.registry.register({
+  DPEdge: DPEdge,
+  DPGroupEdge: DPGroupEdge
+});

package/es/comps/DynamicPorts/comps/shape/node.d.ts

@@ -0,0 +1,11 @@
+import { ReactShape } from '@antv/x6-react-shape';
+export declare class BaseNode extends ReactShape {
+    isGroup(): boolean;
+}
+export declare class DPNode extends BaseNode {
+    getInPorts(): import("@antv/x6/lib/model/port").PortManager.PortMetadata[];
+    getOutPorts(): import("@antv/x6/lib/model/port").PortManager.PortMetadata[];
+}
+export declare class DPGroupNode extends BaseNode {
+    isGroup(): boolean;
+}

package/es/comps/DynamicPorts/comps/shape/node.js

@@ -0,0 +1,190 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import { Dom, Node } from '@antv/x6';
+import { ReactShape } from '@antv/x6-react-shape';
+import { NODE_WIDTH, NODE_HEIGHT } from '../../constant';
+export var BaseNode = /*#__PURE__*/function (_ReactShape) {
+  _inherits(BaseNode, _ReactShape);
+
+  var _super = _createSuper(BaseNode);
+
+  function BaseNode() {
+    _classCallCheck(this, BaseNode);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(BaseNode, [{
+    key: "isGroup",
+    value: // eslint-disable-next-line class-methods-use-this
+    function isGroup() {
+      return false;
+    }
+  }]);
+
+  return BaseNode;
+}(ReactShape);
+export var DPNode = /*#__PURE__*/function (_BaseNode) {
+  _inherits(DPNode, _BaseNode);
+
+  var _super2 = _createSuper(DPNode);
+
+  function DPNode() {
+    _classCallCheck(this, DPNode);
+
+    return _super2.apply(this, arguments);
+  }
+
+  _createClass(DPNode, [{
+    key: "getInPorts",
+    value: function getInPorts() {
+      return this.getPortsByGroup('in');
+    }
+  }, {
+    key: "getOutPorts",
+    value: function getOutPorts() {
+      return this.getPortsByGroup('out');
+    }
+  }]);
+
+  return DPNode;
+}(BaseNode);
+Node.registry.register('rz-rect-port', DPNode);
+DPNode.config({
+  width: NODE_WIDTH,
+  height: NODE_HEIGHT,
+  shape: 'rz-rect-port',
+  ports: {
+    groups: {
+      in: {
+        position: {
+          name: 'top'
+        },
+        zIndex: 2
+      },
+      out: {
+        position: {
+          name: 'bottom'
+        },
+        zIndex: 2
+      }
+    }
+  },
+  attrs: {
+    body: {
+      magnet: false,
+      fill: 'none',
+      stroke: 'none',
+      refWidth: '100%',
+      refHeight: '100%',
+      zIndex: 1
+    }
+  },
+  portMarkup: [{
+    tagName: 'foreignObject',
+    selector: 'fo',
+    attrs: {
+      width: 6,
+      height: 6,
+      x: -3,
+      y: -3,
+      zIndex: 10,
+      // magnet决定是否可交互
+      magnet: 'true'
+    },
+    children: [{
+      ns: Dom.ns.xhtml,
+      tagName: 'body',
+      selector: 'foBody',
+      attrs: {
+        xmlns: Dom.ns.xhtml
+      },
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: [{
+        tagName: 'div',
+        selector: 'content',
+        style: {
+          width: '100%',
+          height: '100%'
+        }
+      }]
+    }]
+  }]
+});
+export var DPGroupNode = /*#__PURE__*/function (_BaseNode2) {
+  _inherits(DPGroupNode, _BaseNode2);
+
+  var _super3 = _createSuper(DPGroupNode);
+
+  function DPGroupNode() {
+    _classCallCheck(this, DPGroupNode);
+
+    return _super3.apply(this, arguments);
+  }
+
+  _createClass(DPGroupNode, [{
+    key: "isGroup",
+    value: // eslint-disable-next-line class-methods-use-this
+    function isGroup() {
+      return true;
+    }
+  }]);
+
+  return DPGroupNode;
+}(BaseNode);
+DPGroupNode.config({
+  ports: {
+    groups: {
+      in: {
+        position: {
+          name: 'top'
+        },
+        zIndex: 2
+      },
+      out: {
+        position: {
+          name: 'bottom'
+        },
+        zIndex: 2
+      }
+    }
+  },
+  portMarkup: [{
+    tagName: 'foreignObject',
+    selector: 'fo',
+    attrs: {
+      width: 6,
+      height: 6,
+      x: -3,
+      y: -3,
+      zIndex: 10,
+      // magnet决定是否可交互
+      magnet: 'true'
+    },
+    children: [{
+      ns: Dom.ns.xhtml,
+      tagName: 'body',
+      selector: 'foBody',
+      attrs: {
+        xmlns: Dom.ns.xhtml
+      },
+      style: {
+        width: '100%',
+        height: '100%'
+      },
+      children: [{
+        tagName: 'span',
+        selector: 'content',
+        style: {
+          width: '100%',
+          height: '100%'
+        }
+      }]
+    }]
+  }]
+});

package/es/comps/DynamicPorts/constant/index.d.ts

@@ -0,0 +1,7 @@
+export declare const GROUP_HORIZONTAL__PADDING = 24;
+export declare const GROUP_VERTICAL__PADDING = 40;
+export declare const NODE_WIDTH = 180;
+export declare const NODE_HEIGHT = 32;
+export declare const RERENDER_EVENT = "RERENDER_EVENT";
+export declare const DRAGGABLE_ALGO_COMPONENT = "ALGO_COMPONENT";
+export declare const DRAGGABLE_MODEL = "MODEL";

package/es/comps/DynamicPorts/constant/index.js

@@ -0,0 +1,19 @@
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 08:48:57
+ * @LastEditTime: 2022-05-24 08:49:24
+ */
+export var GROUP_HORIZONTAL__PADDING = 24; // 分组横向 padding
+
+export var GROUP_VERTICAL__PADDING = 40; // 分组纵向 padding
+
+export var NODE_WIDTH = 180;
+export var NODE_HEIGHT = 32; // 触发画布重新渲染事件
+
+export var RERENDER_EVENT = 'RERENDER_EVENT';
+/*
+ * 以下是拖拽相关
+ */
+
+export var DRAGGABLE_ALGO_COMPONENT = 'ALGO_COMPONENT';
+export var DRAGGABLE_MODEL = 'MODEL';

package/es/comps/DynamicPorts/index.css

@@ -0,0 +1,159 @@
+.node-element {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 180px;
+  height: 32px;
+  overflow: hidden;
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+}
+.node-element.selected,
+.node-element:hover {
+  background-color: rgba(243, 249, 255, 0.92);
+  border: 1px solid #1890ff;
+  box-shadow: 0 0 3px 3px rgba(64, 169, 255, 0.2);
+}
+.node-element.selected .icon,
+.node-element:hover .icon {
+  width: 32px;
+  height: 30px;
+  margin: 0 1px 0 -1px;
+}
+.node-element > * {
+  flex-grow: 1;
+}
+.node-element .icon {
+  display: inline-flex;
+  flex-grow: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background-color: rgba(229, 238, 255, 0.85);
+  border-radius: 4px 0 0 4px;
+}
+.node-element .notation {
+  display: inline-flex;
+  align-items: center;
+  width: calc(100% - 32px);
+  padding: 0 8px;
+  user-select: none;
+}
+.node-element .notation > * {
+  flex-grow: 1;
+}
+.node-element .notation .name {
+  overflow-x: hidden;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+.node-element .notation .statusIcon {
+  display: inline-flex;
+  flex-grow: 0;
+  align-items: center;
+  font-size: 14px;
+  transform: translateZ(0);
+}
+.x6-node [magnet='true'] {
+  cursor: crosshair;
+  transition: none;
+}
+.x6-node [magnet='true']:hover {
+  opacity: 1;
+}
+.x6-node [magnet='true'][port-group='in'] {
+  cursor: move;
+  stroke: none;
+}
+.x6-port-body > span {
+  display: block;
+}
+.dp-port {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #808080;
+  border-radius: 100%;
+  background: #fff;
+  display: block;
+}
+.dp-port.connected {
+  width: 0;
+  height: 0;
+  margin-top: 3px;
+  margin-left: -1px;
+  border-width: 5px 4px 0;
+  border-style: solid;
+  border-color: #808080 transparent transparent;
+  border-radius: 0;
+  background-color: transparent;
+}
+.x6-port-body.available {
+  overflow: visible;
+}
+.x6-port-body.available body {
+  overflow: visible;
+}
+.x6-port-body.available span {
+  overflow: visible;
+  display: block;
+}
+.x6-port-body.available body > span::before {
+  content: ' ';
+  float: left;
+  width: 20px;
+  height: 20px;
+  margin-top: -6px;
+  margin-left: -6px;
+  border-radius: 50%;
+  background-color: rgba(57, 202, 116, 0.6);
+  box-sizing: border-box;
+}
+.x6-port-body.available body > span::after {
+  content: ' ';
+  float: left;
+  clear: both;
+  width: 10px;
+  height: 10px;
+  margin-top: -15px;
+  margin-left: -1px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid #39ca74;
+  z-index: 10;
+  box-sizing: border-box;
+}
+.x6-port-body.adsorbed {
+  overflow: visible;
+}
+.x6-port-body.adsorbed body {
+  overflow: visible;
+}
+.x6-port-body.adsorbed body > span::before {
+  content: ' ';
+  float: left;
+  width: 28px;
+  height: 28px;
+  margin-top: -9px;
+  margin-left: -10px;
+  border-radius: 50%;
+  background-color: rgba(57, 202, 116, 0.6);
+  box-sizing: border-box;
+}
+.x6-port-body.adsorbed body > span::after {
+  content: ' ';
+  float: left;
+  clear: both;
+  width: 10px;
+  height: 10px;
+  margin-top: -19px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid #39ca74;
+  z-index: 10;
+  box-sizing: border-box;
+}

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

@@ -1,2 +1,4 @@
+import './index.less';
+import './comps/shape/connector';
 declare const DynamicPorts: () => JSX.Element;
 export default DynamicPorts;

package/es/comps/DynamicPorts/index.js

@@ -1,15 +1,122 @@
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+
 /*
  * @Author: wangxian
  * @Date: 2022-05-16 18:53:31
- * @LastEditTime: 2022-05-23 17:05:14
+ * @LastEditTime: 2022-05-24 12:09:46
  */
-import { Markup } from "@antv/x6/es/view/markup";
+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 "./index.css";
+import './comps/shape/connector';
 
 var DynamicPorts = function DynamicPorts() {
-  var containerRef = React.useRef();
+  var divRef = React.useRef(null);
+  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);
+          }
+        }
+      });
+      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
+      }));
+    }
+  }, []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    ref: containerRef
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    ref: divRef
   }));
 };
 

package/es/comps/MetadataEdit/components/MetaPropsEdit.js

@@ -36,11 +36,13 @@ var MetaPropsEdit = function MetaPropsEdit(props) {
   var metaType = useMetaType(metadataTag, refresh);
 
   var onTypeChange = function onTypeChange(idx) {
-    var _properties = form.getFieldValue('properties');
+    var _properties$idx, _properties$idx2;
+
+    var _properties = form.getFieldValue('properties') || [];
 
     var __properties = {
-      id: _properties[idx].id,
-      type: _properties[idx].type
+      id: (_properties$idx = _properties[idx]) === null || _properties$idx === void 0 ? void 0 : _properties$idx.id,
+      type: (_properties$idx2 = _properties[idx]) === null || _properties$idx2 === void 0 ? void 0 : _properties$idx2.type
     };
     _properties[idx] = __properties;
     form.setFieldsValue({

package/es/framework/graph/index.d.ts

@@ -0,0 +1 @@
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "public": true,
   "name": "ronds-metadata",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -32,6 +32,7 @@
   ],
   "dependencies": {
     "@antv/x6": "^1.32.2",
+    "@antv/x6-react-shape": "^1.6.0",
     "@babel/helper-create-regexp-features-plugin": "^7.12.13",
     "@babel/runtime": "^7.11.2",
     "@popperjs/core": "^2.4.4",