ronds-metadata 1.1.7 → 1.1.10

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,52 @@
+import React from "react";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-26 08:50:06
+ * @LastEditTime: 2022-05-28 11:10:24
+ */
+import { DragSource } from 'react-dnd';
+import { GlobalOutlined } from '@ant-design/icons';
+import Icon from '../../../comps/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"
+  }, (data === null || data === void 0 ? void 0 : data.icon) ? /*#__PURE__*/React.createElement(Icon, {
+    type: data === null || data === void 0 ? void 0 : data.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,51 @@
+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:18:24
+ */
+import React from 'react';
+import { CompressOutlined, OneToOneOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import "./index.css";
+import { tr } from '@/framework/locale';
+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: tr('放大'),
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: onZoomIn,
+    className: "item"
+  }, /*#__PURE__*/React.createElement(ZoomInOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
+    overlayClassName: "popover",
+    content: tr('缩小'),
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: onZoomOut,
+    className: "item"
+  }, /*#__PURE__*/React.createElement(ZoomOutOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
+    overlayClassName: "popover",
+    content: tr('实际尺寸'),
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: onRealContent,
+    className: "item"
+  }, /*#__PURE__*/React.createElement(OneToOneOutlined, null))), /*#__PURE__*/React.createElement(_Popover, {
+    overlayClassName: "popover",
+    content: tr('适应画布'),
+    placement: "left"
+  }, /*#__PURE__*/React.createElement("li", {
+    onClick: onFitContent,
+    className: "item"
+  }, /*#__PURE__*/React.createElement(CompressOutlined, null))));
+};

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

@@ -3,20 +3,24 @@ import React from "react";
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 08:50:16
- * @LastEditTime: 2022-05-24 11:58:52
+ * @LastEditTime: 2022-05-28 11:09:22
  */
 import { GlobalOutlined } from '@ant-design/icons';
 import "../index.css";
+import Icon from '../../../comps/Icons';
 
 var NodeElement = function NodeElement(props) {
   var node = props.node;
   var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
-  var name = data.name;
+  var name = data.name,
+      icon = data.icon;
   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: "icon"
+  }, icon ? /*#__PURE__*/React.createElement(Icon, {
+    type: icon
+  }) : /*#__PURE__*/React.createElement(GlobalOutlined, null)), /*#__PURE__*/React.createElement("div", {
     className: "notation"
   }, /*#__PURE__*/React.createElement("div", {
     className: "name"

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/node.js

@@ -106,7 +106,7 @@ DPNode.config({
         height: '100%'
       },
       children: [{
-        tagName: 'div',
+        tagName: 'span',
         selector: 'content',
         style: {
           width: '100%',

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

@@ -3,5 +3,5 @@ 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";
+export declare const DRAGGABLE_COMPONENT = "DRAGGABLE_COMPONENT";
+export declare const DRAGGABLE_MODEL = "DRAGGABLE_MODEL";

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

@@ -1,7 +1,7 @@
 /*
  * @Author: wangxian
  * @Date: 2022-05-24 08:48:57
- * @LastEditTime: 2022-05-24 08:49:24
+ * @LastEditTime: 2022-05-25 11:37:48
  */
 export var GROUP_HORIZONTAL__PADDING = 24; // 分组横向 padding
 
@@ -15,5 +15,5 @@ export var RERENDER_EVENT = 'RERENDER_EVENT';
  * 以下是拖拽相关
  */
 
-export var DRAGGABLE_ALGO_COMPONENT = 'ALGO_COMPONENT';
-export var DRAGGABLE_MODEL = 'MODEL';
+export var DRAGGABLE_COMPONENT = 'DRAGGABLE_COMPONENT';
+export var DRAGGABLE_MODEL = 'DRAGGABLE_MODEL';

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

@@ -0,0 +1,62 @@
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { Subscription } from 'rxjs/internal/Subscription';
+import { ConnectionRemovedArgs, ContextMenuInfo, GraphCore } from '../../framework/graph';
+import { BaseEdge, DPEdge } from './comps/shape/edge';
+import { BaseNode, DPNode } from './comps/shape/node';
+import { NDPGraph } from './interface';
+import { formatGraphData } from './utils';
+declare type NodeMeta = ReturnType<typeof formatGraphData>['nodes'][number];
+declare type EdgeMeta = ReturnType<typeof formatGraphData>['edges'][number];
+interface IFactory$ {
+    /**
+     * 实验图加载状态
+     */
+    loading: BehaviorSubject<boolean>;
+    /**
+     * 图数据流
+     */
+    dpGraph: BehaviorSubject<NDPGraph.GraphData>;
+    /**
+     * 选中的节点
+     */
+    selectedNodes: BehaviorSubject<NDPGraph.Node[]>;
+    /**
+     * 右击菜单
+     */
+    contextMenuInfo: BehaviorSubject<ContextMenuInfo>;
+}
+declare class DPGraph extends GraphCore<BaseNode, BaseEdge> {
+    factory$: IFactory$;
+    dpGraphSub?: Subscription;
+    constructor(graphData?: NDPGraph.GraphData);
+    initialize(graphData: NDPGraph.GraphData): Promise<void>;
+    loadDPGraph(graphData: any): Promise<void>;
+    isGraphReady(): boolean;
+    renderGraph: (wrapper: HTMLElement, container: HTMLElement) => void;
+    renderNode(nodeMeta: NodeMeta): BaseNode | undefined;
+    renderEdge(edgeMeta: EdgeMeta): BaseEdge | undefined;
+    addDragNode(data: NDPGraph.Node): void;
+    updateDPGraph(nodes?: NDPGraph.Node[], edges?: NDPGraph.Edge[]): Promise<void>;
+    delDPGraphElement(nodes?: string[], edges?: NDPGraph.Edge[]): Promise<void>;
+    zoomGraph: (factor: number) => void;
+    zoomGraphToFit: () => void;
+    zoomGraphRealSize: () => void;
+    onConnectNode(args: any): Promise<{
+        success: boolean;
+    }>;
+    onSelectNodes(nodes: BaseNode[]): void;
+    onConnectionRemoved(args: ConnectionRemovedArgs): void;
+    onDeleteNodes: (ids: string[] | string) => void;
+    onDeleteEdges: (edges: BaseEdge | BaseEdge[]) => void;
+    onDeleteNodeOrEdge(args: {
+        nodes: DPNode[];
+        edges: DPEdge[];
+    }): void;
+    onContextMenu(data: ContextMenuInfo): any;
+    clearContextMenuInfo: () => void;
+    dispose(): void;
+}
+export declare let gDPGraph: DPGraph;
+export declare const useDPGraph: (graphData: NDPGraph.GraphData) => DPGraph;
+export declare const useUnmountDPGraph: () => void;
+export {};