ronds-metadata 1.2.10 → 1.2.11

package/es/comps/DynamicPorts/index.js

@@ -0,0 +1,143 @@
+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-06-28 14:58:00
+ */
+import React from 'react';
+import { filter } from 'rxjs';
+import { useDrop } from 'react-dnd';
+import './index.less';
+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(props) {
+  var defaultValue = props.defaultValue,
+      onChange = props.onChange,
+      onNodeSelect = props.onNodeSelect,
+      getDPGraphInstance = props.getDPGraphInstance;
+  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 (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]);
+      });
+
+      getDPGraphInstance && getDPGraphInstance(_dpGraph);
+      firstLoadRef.current = false;
+    }
+  }, [defaultValue]); // 处理组件拖拽落下事件
+
+  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: {
+      height: '100%',
+      width: '100%'
+    },
+    ref: divRef
+  })));
+};
+
+export default DynamicPorts;

package/es/comps/DynamicPorts/interface.js

@@ -0,0 +1,6 @@
+/*
+ * @Author: wangxian
+ * @Date: 2022-05-24 16:10:46
+ * @LastEditTime: 2022-05-30 09:44:45
+ */
+export {};

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/Editable/DataCell/ButtonCell.js

@@ -0,0 +1,45 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-03-04 14:53:50
+ * @LastEditTime: 2022-07-08 08:57:41
+ */
+import React from 'react';
+import { SettingOutlined } from '@ant-design/icons';
+import { EditableContext } from '../interface';
+
+function Index(props) {
+  var dataIndex = props.dataIndex,
+      record = props.record,
+      disabled = props.disabled;
+
+  var _ref = React.useContext(EditableContext) || undefined,
+      editableStream = _ref.editableStream,
+      editConfig = _ref.editConfig;
+
+  var onClick = function onClick(e) {
+    e.stopPropagation();
+    editableStream && editableStream.next({
+      type: 'onButtonCellClick',
+      payload: record
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(_Form.Item, {
+    name: dataIndex,
+    style: {
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    disabled: editConfig.type === 'edit' ? disabled : false,
+    onClick: onClick,
+    icon: /*#__PURE__*/React.createElement(SettingOutlined, null)
+  }));
+}
+
+export default /*#__PURE__*/React.memo(Index);

package/es/comps/Editable/DataCell/ColorPicker.js

@@ -0,0 +1,33 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-03-04 14:53:50
+ * @LastEditTime: 2022-09-29 16:44:57
+ */
+import React from 'react';
+import { EditableContext } from '../interface';
+
+function Index(props) {
+  var dataIndex = props.dataIndex,
+      disabled = props.disabled;
+
+  var _ref = React.useContext(EditableContext) || undefined,
+      editConfig = _ref.editConfig;
+
+  return /*#__PURE__*/React.createElement(_Form.Item, {
+    name: dataIndex,
+    style: {
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    type: "color",
+    size: "small",
+    disabled: editConfig.type === 'edit' ? disabled : false
+  }));
+}
+
+export default /*#__PURE__*/React.memo(Index);

package/es/comps/Editable/DataCell/Input.js

@@ -0,0 +1,54 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/input/style";
+import _Input from "antd/es/input";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-03-04 14:53:50
+ * @LastEditTime: 2022-09-29 16:44:52
+ */
+import React from 'react';
+import { EditableContext } from '../interface';
+
+function Index(props) {
+  var dataIndex = props.dataIndex,
+      rowIndex = props.rowIndex,
+      disabled = props.disabled;
+
+  var _ref = React.useContext(EditableContext) || undefined,
+      editConfig = _ref.editConfig;
+
+  var inputRef = React.useRef();
+  var firstLoadRef = React.useRef(true);
+  React.useEffect(function () {
+    var _editConfig$editCellK, _editConfig$editCellK2;
+
+    if (!inputRef.current) return;
+
+    if (((_editConfig$editCellK = editConfig.editCellKey) === null || _editConfig$editCellK === void 0 ? void 0 : _editConfig$editCellK.dataIndex) === dataIndex && ((_editConfig$editCellK2 = editConfig.editCellKey) === null || _editConfig$editCellK2 === void 0 ? void 0 : _editConfig$editCellK2.rowIndex) === rowIndex) {
+      if (firstLoadRef.current) {
+        var _inputRef$current$sta, _inputRef$current$sta2;
+
+        // 选中内容
+        inputRef.current.input.setSelectionRange(0, ((_inputRef$current$sta = inputRef.current.state) === null || _inputRef$current$sta === void 0 ? void 0 : (_inputRef$current$sta2 = _inputRef$current$sta.value) === null || _inputRef$current$sta2 === void 0 ? void 0 : _inputRef$current$sta2.length) || 0);
+        firstLoadRef.current = false;
+      } // 设置焦点
+
+
+      inputRef.current.focus();
+    }
+  }, [editConfig]);
+  return /*#__PURE__*/React.createElement(_Form.Item, {
+    name: dataIndex,
+    style: {
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement(_Input, {
+    ref: inputRef,
+    size: "small",
+    disabled: editConfig.type === 'edit' ? disabled : false
+  }));
+}
+
+export default /*#__PURE__*/React.memo(Index);

package/es/comps/Editable/DataCell/Number.js

@@ -0,0 +1,44 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/input-number/style";
+import _InputNumber from "antd/es/input-number";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-03-04 14:53:50
+ * @LastEditTime: 2022-09-29 16:44:49
+ */
+import React from 'react';
+import { EditableContext } from '../interface';
+
+function Index(props) {
+  var dataIndex = props.dataIndex,
+      rowIndex = props.rowIndex,
+      disabled = props.disabled;
+
+  var _ref = React.useContext(EditableContext) || undefined,
+      editConfig = _ref.editConfig;
+
+  var inputRef = React.useRef();
+  React.useEffect(function () {
+    var _editConfig$editCellK, _editConfig$editCellK2;
+
+    if (!inputRef.current) return;
+
+    if (((_editConfig$editCellK = editConfig.editCellKey) === null || _editConfig$editCellK === void 0 ? void 0 : _editConfig$editCellK.dataIndex) === dataIndex && ((_editConfig$editCellK2 = editConfig.editCellKey) === null || _editConfig$editCellK2 === void 0 ? void 0 : _editConfig$editCellK2.rowIndex) === rowIndex) {
+      inputRef.current.focus(); // 设置焦点
+    }
+  }, [editConfig]);
+  return /*#__PURE__*/React.createElement(_Form.Item, {
+    name: dataIndex,
+    style: {
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement(_InputNumber, {
+    size: "small",
+    ref: inputRef,
+    disabled: editConfig.type === 'edit' ? disabled : false
+  }));
+}
+
+export default /*#__PURE__*/React.memo(Index);

package/es/comps/Editable/DataCell/Select.js

@@ -0,0 +1,48 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/select/style";
+import _Select from "antd/es/select";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["dataIndex", "mode", "disabled"];
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-03-04 14:53:50
+ * @LastEditTime: 2022-10-10 13:47:12
+ */
+import React from 'react';
+import { EditableContext } from '../interface';
+
+function Index(props) {
+  var dataIndex = props.dataIndex,
+      mode = props.mode,
+      disabled = props.disabled,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _ref = React.useContext(EditableContext) || undefined,
+      editConfig = _ref.editConfig;
+
+  return /*#__PURE__*/React.createElement(_Form.Item, {
+    name: dataIndex,
+    style: {
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement(_Select, {
+    disabled: editConfig.type === 'edit' ? disabled : false,
+    mode: mode || undefined,
+    showSearch: true,
+    filterOption: function filterOption(input, option) {
+      var _option$label;
+
+      return (option === null || option === void 0 ? void 0 : (_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.toString().indexOf(input)) >= 0;
+    },
+    allowClear: true,
+    style: {
+      width: '100%'
+    },
+    size: "small",
+    options: restProps.enum
+  }));
+}
+
+export default /*#__PURE__*/React.memo(Index);

package/es/comps/Editable/DataCell/Switch.js

@@ -0,0 +1,33 @@
+import "antd/es/form/style";
+import _Form from "antd/es/form";
+import "antd/es/switch/style";
+import _Switch from "antd/es/switch";
+
+/*
+ * @Author: wangxian
+ * @Date: 2022-03-04 14:53:50
+ * @LastEditTime: 2022-09-29 16:44:43
+ */
+import React from 'react';
+import { EditableContext } from '../interface';
+
+function Index(props) {
+  var dataIndex = props.dataIndex,
+      disabled = props.disabled;
+
+  var _ref = React.useContext(EditableContext) || undefined,
+      editConfig = _ref.editConfig;
+
+  return /*#__PURE__*/React.createElement(_Form.Item, {
+    name: dataIndex,
+    valuePropName: "checked",
+    style: {
+      margin: 0
+    }
+  }, /*#__PURE__*/React.createElement(_Switch, {
+    size: "small",
+    disabled: editConfig.type === 'edit' ? disabled : false
+  }));
+}
+
+export default /*#__PURE__*/React.memo(Index);

package/es/comps/Editable/comps/EditableAction.js

@@ -0,0 +1,110 @@
+import "antd/es/popconfirm/style";
+import _Popconfirm from "antd/es/popconfirm";
+import "antd/es/button/style";
+import _Button from "antd/es/button";
+import React from 'react';
+import { EditableContext } from '../interface';
+import { isFreeEditRow } from '../utils';
+import { tr } from '../../../framework/locale';
+
+var EditableAction = function EditableAction(props) {
+  var _editConfig$editCellK;
+
+  var type = props.type,
+      record = props.record;
+
+  var _ref = React.useContext(EditableContext) || undefined,
+      editableStream = _ref.editableStream,
+      editConfig = _ref.editConfig;
+
+  var onEdit = function onEdit(e) {
+    e.stopPropagation();
+    editableStream.next({
+      type: 'editRowKey',
+      payload: record
+    });
+  };
+
+  var onCancel = function onCancel(e) {
+    e.stopPropagation();
+    editableStream.next({
+      type: 'editRowKey',
+      payload: {
+        _rowkey_: undefined
+      }
+    });
+  };
+
+  var onSave = function onSave(e) {
+    e.stopPropagation();
+    editableStream.next({
+      type: 'onSingleSave',
+      payload: record
+    });
+    editableStream.next({
+      type: 'editCellKey',
+      payload: {
+        dataIndex: undefined,
+        rowIndex: undefined
+      }
+    });
+  };
+
+  var onDelete = function onDelete(e) {
+    e.stopPropagation();
+    editableStream.next({
+      type: 'onDelete',
+      payload: record
+    });
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, type === 'single' && /*#__PURE__*/React.createElement(React.Fragment, null, editConfig.curRow !== record._rowKey_ && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    style: {
+      padding: 0,
+      marginRight: '10px'
+    },
+    disabled: (editConfig.curRow || editConfig.curRow === 0) && editConfig.curRow !== record._rowKey_,
+    size: "small",
+    onClick: onEdit,
+    title: tr('编辑')
+  }, tr('编辑'))), editConfig.curRow === record._rowKey_ && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    onClick: onSave,
+    style: {
+      padding: 0,
+      marginRight: '10px'
+    }
+  }, tr('确定')), editConfig.type === 'edit' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    onClick: onCancel,
+    style: {
+      padding: 0,
+      marginRight: '10px'
+    }
+  }, tr('取消'))))), type === 'freedom' && /*#__PURE__*/React.createElement(React.Fragment, null, (record._rowKey_ === (editConfig === null || editConfig === void 0 ? void 0 : (_editConfig$editCellK = editConfig.editCellKey) === null || _editConfig$editCellK === void 0 ? void 0 : _editConfig$editCellK.rowIndex) || isFreeEditRow(editConfig.curRow, record._rowKey_)) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    onClick: onSave,
+    style: {
+      padding: 0,
+      marginRight: '10px'
+    }
+  }, tr('确定')))), /*#__PURE__*/React.createElement(_Popconfirm, {
+    placement: 'left',
+    title: tr('确认删除该条数据'),
+    onConfirm: onDelete,
+    onCancel: function onCancel(e) {
+      e.stopPropagation();
+    },
+    okText: tr('确定'),
+    cancelText: tr('取消')
+  }, /*#__PURE__*/React.createElement(_Button, {
+    type: "link",
+    style: {
+      padding: 0,
+      marginRight: '10px'
+    }
+  }, tr('删除'))));
+};
+
+export default EditableAction;