ronds-metadata 1.1.5 → 1.1.8

package/es/comps/DynamicPorts/comps/ContextMenu.css

@@ -0,0 +1,8 @@
+.mask {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 99999;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import './ContextMenu.less';
+interface IContextMenuProps {
+    graph: any;
+}
+declare const ContextMenu: React.FC<IContextMenuProps>;
+export default ContextMenu;

package/es/comps/DynamicPorts/comps/ContextMenu.js

@@ -0,0 +1,44 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-27 09:56:39
+ * @LastEditTime: 2022-05-27 16:16:25
+ */
+import useObservable from '@/framework/rxjs-hooks/useObservable';
+import React from 'react';
+import NodeContextMenu from './contextMenu/NodeContextMenu';
+import "./ContextMenu.css";
+import { EdgeContextMenu } from './contextMenu/EdgeContextMenu';
+
+var ContextMenu = function ContextMenu(props) {
+  var _graph$factory$;
+
+  var graph = props.graph;
+
+  var _React$useState = React.useState(),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      menu = _React$useState2[0],
+      setMenu = _React$useState2[1];
+
+  useObservable(function (v) {
+    setMenu(v);
+  }, [graph === null || graph === void 0 ? void 0 : (_graph$factory$ = graph.factory$) === null || _graph$factory$ === void 0 ? void 0 : _graph$factory$.contextMenuInfo]);
+
+  // 暂时屏蔽graph的右击菜单
+  if (!(menu === null || menu === void 0 ? void 0 : menu.type) || (menu === null || menu === void 0 ? void 0 : menu.type) === 'graph') {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "mask"
+  }, (menu === null || menu === void 0 ? void 0 : menu.type) === 'node' && /*#__PURE__*/React.createElement(NodeContextMenu, {
+    graph: graph,
+    data: menu.data
+  }), (menu === null || menu === void 0 ? void 0 : menu.type) === 'edge' && /*#__PURE__*/React.createElement(EdgeContextMenu, {
+    graph: graph,
+    data: menu.data
+  }));
+};
+
+export default ContextMenu;

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

@@ -0,0 +1,7 @@
+import { NDPGraph } from '../interface';
+import '../index.less';
+interface IDragNodeProps {
+    data: NDPGraph.Node;
+}
+declare const DragNode: (props: IDragNodeProps) => JSX.Element;
+export default DragNode;

package/es/comps/DynamicPorts/comps/DragNode.js

@@ -0,0 +1,49 @@
+import React from "react";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-26 08:50:06
+ * @LastEditTime: 2022-05-26 09:11:54
+ */
+import { DragSource } from 'react-dnd';
+import { GlobalOutlined } from '@ant-design/icons';
+import { DRAGGABLE_COMPONENT } from '../constant';
+import "../index.css";
+
+var InnerNodeTitle = function InnerNodeTitle(props) {
+  var data = props.data,
+      connectDragPreview = props.connectDragPreview,
+      connectDragSource = props.connectDragSource;
+  return /*#__PURE__*/React.createElement("div", null, connectDragPreview(connectDragSource( /*#__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"
+  }, data.name))))));
+};
+
+var NodeTitle = DragSource(DRAGGABLE_COMPONENT, {
+  beginDrag: function beginDrag(props) {
+    return {
+      comp: props.data
+    };
+  }
+}, function (connect, monitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    connectDragPreview: connect.dragPreview(),
+    isDragging: monitor.isDragging()
+  };
+})(InnerNodeTitle);
+
+var DragNode = function DragNode(props) {
+  var data = props.data;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NodeTitle, {
+    data: data
+  }));
+};
+
+export default DragNode;

package/es/comps/DynamicPorts/comps/GraphHandler/index.css

@@ -0,0 +1,27 @@
+.handler {
+  position: absolute;
+  top: 61px;
+  right: 14px;
+  z-index: 99;
+  width: 32px;
+  margin: 0;
+  padding: 3px 0;
+  color: rgba(0, 0, 0, 0.45);
+  font-size: 16px;
+  list-style-type: none;
+  background-color: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 3px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.01);
+}
+.handler .item {
+  text-align: center;
+  cursor: pointer;
+}
+.handler .item:hover {
+  color: #000;
+  background-color: #e0e0e0;
+}
+.popover :global .ant-popover-inner-content {
+  padding: 3px 8px;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import './index.less';
+interface Props {
+    className?: string;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onFitContent: () => void;
+    onRealContent: () => void;
+}
+export declare const GraphHandler: React.FC<Props>;
+export {};

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

@@ -0,0 +1,50 @@
+import "antd/es/popover/style";
+import _Popover from "antd/es/popover";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-27 14:21:23
+ * @LastEditTime: 2022-05-28 10:10:06
+ */
+import React from 'react';
+import { CompressOutlined, OneToOneOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import "./index.css";
+export var GraphHandler = function GraphHandler(props) {
+  var className = props.className,
+      onZoomIn = props.onZoomIn,
+      onZoomOut = props.onZoomOut,
+      onFitContent = props.onFitContent,
+      onRealContent = props.onRealContent;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: classNames('handler', className)
+  }, /*#__PURE__*/React.createElement(_Popover, {
+    overlayClassName: "popover",
+    content: "\u653E\u5927",
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: onZoomIn,
+    className: "item"
+  }, /*#__PURE__*/React.createElement(ZoomInOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
+    overlayClassName: "popover",
+    content: "\u7F29\u5C0F",
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: onZoomOut,
+    className: "item"
+  }, /*#__PURE__*/React.createElement(ZoomOutOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
+    overlayClassName: "popover",
+    content: "\u5B9E\u9645\u5C3A\u5BF8",
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: onRealContent,
+    className: "item"
+  }, /*#__PURE__*/React.createElement(OneToOneOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
+    overlayClassName: "popover",
+    content: "\u9002\u5E94\u753B\u5E03",
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: onFitContent,
+    className: "item"
+  }, /*#__PURE__*/React.createElement(CompressOutlined, null))));
+};

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-26 16:37:24
+ */
+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/contextMenu/EdgeContextMenu/index.css

@@ -0,0 +1,5 @@
+.edgeContextMenu {
+  position: absolute;
+  z-index: 1;
+  background-color: #fff;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.less';
+interface Props {
+    graph: any;
+    data: any;
+}
+export declare const EdgeContextMenu: React.FC<Props>;
+export {};

package/es/comps/DynamicPorts/comps/contextMenu/EdgeContextMenu/index.js

@@ -0,0 +1,42 @@
+import "antd/es/menu/style";
+import _Menu from "antd/es/menu";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-27 15:55:57
+ * @LastEditTime: 2022-05-28 10:07:16
+ */
+import React, { useCallback, useRef } from 'react';
+import { DeleteOutlined } from '@ant-design/icons';
+import { useClickAway } from 'ahooks';
+import { graphPointToOffsetPoint } from '../../../utils';
+import "./index.css";
+import { tr } from '../../../../../framework/locale';
+export var EdgeContextMenu = function EdgeContextMenu(props) {
+  var graph = props.graph,
+      data = props.data;
+  var containerRef = useRef(null);
+  useClickAway(function () {
+    graph.clearContextMenuInfo();
+  }, containerRef);
+  var onDeleteEdge = useCallback(function () {
+    graph.onDeleteEdges(data.edge);
+    graph.clearContextMenuInfo();
+  }, [graph, data]);
+
+  var _graphPointToOffsetPo = graphPointToOffsetPoint(graph.graph, data, graph.wrapper),
+      left = _graphPointToOffsetPo.x,
+      top = _graphPointToOffsetPo.y;
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "edgeContextMenu",
+    style: {
+      top: top,
+      left: left
+    }
+  }, /*#__PURE__*/React.createElement(_Menu, null, /*#__PURE__*/React.createElement(_Menu.Item, {
+    onClick: onDeleteEdge,
+    icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
+  }, tr('删除'))));
+};

package/es/comps/DynamicPorts/comps/contextMenu/GraphContextMenu/index.css

@@ -0,0 +1,21 @@
+.graphContextMenu {
+  position: absolute;
+  z-index: 1;
+  background-color: #fff;
+}
+.loadExperimentModal :global .ant-modal-title {
+  font-size: 14px;
+}
+.loadExperimentModal :global .ant-btn {
+  font-size: 12px;
+}
+.loadExperimentModal .versionTable :global .ant-table.ant-table-small {
+  font-size: 12px;
+}
+.loadExperimentModal .versionTable .operations :global .ant-btn:first-of-type {
+  padding-left: 0;
+  border-left: 0;
+}
+.loadExperimentModal .versionTable .operations :global .ant-btn.ant-btn-sm {
+  font-size: 12px;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.less';
+interface Props {
+    graph: any;
+    data: any;
+}
+export declare const GraphContextMenu: React.FC<Props>;
+export {};

package/es/comps/DynamicPorts/comps/contextMenu/GraphContextMenu/index.js

@@ -0,0 +1,40 @@
+import "antd/es/menu/style";
+import _Menu from "antd/es/menu";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-27 16:04:27
+ * @LastEditTime: 2022-05-28 10:07:54
+ */
+import React, { useRef } from 'react';
+import { ReloadOutlined } from '@ant-design/icons';
+import { useClickAway } from 'ahooks';
+import { graphPointToOffsetPoint } from '../../../utils';
+import { tr } from '../../../../../framework/locale';
+import "./index.css";
+export var GraphContextMenu = function GraphContextMenu(props) {
+  var graph = props.graph,
+      data = props.data;
+  var containerRef = useRef(null);
+  useClickAway(function () {
+    graph.clearContextMenuInfo();
+  }, containerRef);
+
+  var onRefresh = function onRefresh() {};
+
+  var _graphPointToOffsetPo = graphPointToOffsetPoint(graph.graph, data, graph.wrapper),
+      left = _graphPointToOffsetPo.x,
+      top = _graphPointToOffsetPo.y;
+
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "graphContextMenu",
+    style: {
+      top: top,
+      left: left
+    }
+  }, /*#__PURE__*/React.createElement(_Menu, null, /*#__PURE__*/React.createElement(_Menu.Item, {
+    onClick: onRefresh,
+    icon: /*#__PURE__*/React.createElement(ReloadOutlined, null)
+  }, tr('刷新'))));
+};

package/es/comps/DynamicPorts/comps/contextMenu/NodeContextMenu/index.css

@@ -0,0 +1,23 @@
+.graphContextMenu {
+  position: absolute;
+  z-index: 1;
+  width: 100px;
+  background-color: #fff;
+  box-shadow: 0 2px 10px rgb(0 0 0 1);
+}
+.loadExperimentModal :global .ant-modal-title {
+  font-size: 14px;
+}
+.loadExperimentModal :global .ant-btn {
+  font-size: 12px;
+}
+.loadExperimentModal .versionTable :global .ant-table.ant-table-small {
+  font-size: 12px;
+}
+.loadExperimentModal .versionTable .operations :global .ant-btn:first-of-type {
+  padding-left: 0;
+  border-left: 0;
+}
+.loadExperimentModal .versionTable .operations :global .ant-btn.ant-btn-sm {
+  font-size: 12px;
+}

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

@@ -0,0 +1,7 @@
+import './index.less';
+interface INodeContextMenuProps {
+    graph: any;
+    data: any;
+}
+declare const NodeContextMenu: (props: INodeContextMenuProps) => JSX.Element;
+export default NodeContextMenu;

package/es/comps/DynamicPorts/comps/contextMenu/NodeContextMenu/index.js

@@ -0,0 +1,55 @@
+import "antd/es/menu/style";
+import _Menu from "antd/es/menu";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import { DeleteOutlined } from '@ant-design/icons';
+import React from 'react';
+import { useClickAway } from 'ahooks';
+import { graphPointToOffsetPoint } from '../../../utils';
+import { tr } from '../../../../../framework/locale';
+import "./index.css";
+
+var NodeContextMenu = function NodeContextMenu(props) {
+  var graph = props.graph,
+      data = props.data;
+  var containerRef = React.useRef(null);
+  useClickAway(function () {
+    graph.clearContextMenuInfo();
+  }, containerRef);
+  var onNodeDel = React.useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return graph.onDeleteNodes([data.node.id]);
+
+          case 2:
+            graph.clearContextMenuInfo();
+
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })), [graph]);
+
+  var _graphPointToOffsetPo = graphPointToOffsetPoint(graph.graph, data, graph.wrapper),
+      left = _graphPointToOffsetPo.x,
+      top = _graphPointToOffsetPo.y;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    className: "graphContextMenu",
+    style: {
+      top: top,
+      left: left
+    }
+  }, /*#__PURE__*/React.createElement(_Menu, null, /*#__PURE__*/React.createElement(_Menu.Item, {
+    onClick: onNodeDel,
+    icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
+  }, tr('删除')))));
+};
+
+export default NodeContextMenu;

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;
+}