liteflow-editor-process 1.0.0

package/dist/LiteFlowEditor/panels/flowGraph/miniMapSimpleNode/index.d.ts

@@ -0,0 +1,7 @@
+import { NodeView } from '@antv/x6';
+declare class MiniMapSimpleNode extends NodeView {
+    protected renderMarkup(): void;
+    protected renderPorts(): null;
+    update(): void;
+}
+export default MiniMapSimpleNode;

package/dist/LiteFlowEditor/panels/flowGraph/miniMapSimpleNode/index.js

@@ -0,0 +1,42 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import { NodeView } from '@antv/x6';
+var MiniMapSimpleNode = /*#__PURE__*/function (_NodeView) {
+  _inherits(MiniMapSimpleNode, _NodeView);
+  var _super = _createSuper(MiniMapSimpleNode);
+  function MiniMapSimpleNode() {
+    _classCallCheck(this, MiniMapSimpleNode);
+    return _super.apply(this, arguments);
+  }
+  _createClass(MiniMapSimpleNode, [{
+    key: "renderMarkup",
+    value: function renderMarkup() {
+      return this.renderJSONMarkup({
+        tagName: 'rect',
+        selector: 'body'
+      });
+    }
+  }, {
+    key: "renderPorts",
+    value: function renderPorts() {
+      return null;
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      _get(_getPrototypeOf(MiniMapSimpleNode.prototype), "update", this).call(this, {
+        body: {
+          refWidth: '100%',
+          refHeight: '100%',
+          fill: '#D9D9D9'
+        }
+      });
+    }
+  }]);
+  return MiniMapSimpleNode;
+}(NodeView);
+export default MiniMapSimpleNode;

package/dist/LiteFlowEditor/panels/flowGraph/nodeEditorModal/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+interface IProps {
+    title?: string;
+    flowGraph: Graph;
+}
+declare const NodeEditModal: React.FC<IProps>;
+export default NodeEditModal;

package/dist/LiteFlowEditor/panels/flowGraph/nodeEditorModal/index.js

@@ -0,0 +1,110 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import { Button, Modal, Radio, Table, Select, Input } from 'antd';
+import styles from "./index.module.less";
+var NodeEditModal = function NodeEditModal(props) {
+  var _props$title = props.title,
+    title = _props$title === void 0 ? '编辑节点' : _props$title,
+    flowGraph = props.flowGraph;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    label = _useState2[0],
+    setLabel = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+
+  // life
+  useEffect(function () {
+    var handler = function handler() {
+      return setVisible(true);
+    };
+    flowGraph.on('graph:editNode', handler);
+    return function () {
+      flowGraph.off('graph:editNode', handler);
+    };
+  }, []);
+  useEffect(function () {
+    if (visible) {
+      var cell = flowGraph.getSelectedCells()[0];
+      var _ref = cell.getData() || {},
+        _label = _ref.label;
+      setLabel(_label);
+    } else {
+      setLabel('');
+    }
+  }, [visible]);
+
+  // events
+  var onOk = function onOk() {
+    setVisible(false);
+  };
+  var onCancel = function onCancel() {
+    setVisible(false);
+  };
+  return /*#__PURE__*/React.createElement(Modal, {
+    className: styles.liteflowEditorModal,
+    width: 560,
+    title: "".concat(title, "-").concat(label),
+    visible: visible,
+    onCancel: onCancel,
+    footer: [/*#__PURE__*/React.createElement(Button, {
+      key: 'cancel',
+      onClick: onCancel
+    }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+      key: 'saveCode',
+      type: 'primary',
+      onClick: onOk
+    }, "\u786E\u5B9A")]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.depsInfoModalContent
+  }, /*#__PURE__*/React.createElement(Radio.Group, {
+    options: ['判断条件', '陪跑'],
+    value: '判断条件'
+  }), /*#__PURE__*/React.createElement(Table, {
+    style: {
+      paddingTop: 20
+    },
+    pagination: false,
+    columns: [{
+      title: '上一节点输出结果',
+      dataIndex: 'position',
+      key: 'position',
+      render: function render(text) {
+        return /*#__PURE__*/React.createElement(Select, {
+          value: "\u6863\u4F4D"
+        }, /*#__PURE__*/React.createElement(Select.Option, {
+          value: "\u6863\u4F4D"
+        }, "\u6863\u4F4D"));
+      }
+    }, {
+      title: '条件关系',
+      dataIndex: 'relationship',
+      key: 'relationship',
+      render: function render(text) {
+        return /*#__PURE__*/React.createElement(Select, {
+          value: ">"
+        }, /*#__PURE__*/React.createElement(Select.Option, {
+          value: ">"
+        }, ">"));
+      }
+    }, {
+      title: '阈值',
+      dataIndex: 'limit',
+      key: 'limit',
+      render: function render(text) {
+        return /*#__PURE__*/React.createElement(Input, {
+          placeholder: "\u8BF7\u8F93\u5165"
+        });
+      }
+    }],
+    dataSource: [{
+      key: '1',
+      position: '档位',
+      relationship: '>',
+      limit: '请输入'
+    }]
+  })));
+};
+export default NodeEditModal;

package/dist/LiteFlowEditor/panels/flowGraph/nodeEditorModal/index.module.less

@@ -0,0 +1,11 @@
+.depsInfoModalContent {
+  padding: 20px;
+}
+
+.liteflowEditorModal {
+  :global {
+    .ant-modal-body {
+      padding: 0;
+    }
+  }
+}

package/dist/LiteFlowEditor/panels/layout/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+import '@antv/x6-react-components/es/split-box/style/index.css';
+interface ISubComponentProps {
+    flowGraph: Graph;
+    widgets?: React.FC<any>[];
+}
+interface IProps {
+    flowGraph?: Graph;
+    SideBar: React.FC<ISubComponentProps>;
+    ToolBar: React.FC<ISubComponentProps>;
+    SettingBar: React.FC<ISubComponentProps>;
+    widgets?: React.FC[];
+}
+declare const Layout: React.FC<IProps>;
+export default Layout;

package/dist/LiteFlowEditor/panels/layout/index.js

@@ -0,0 +1,117 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState, useContext } from 'react';
+import { SplitBox } from '@antv/x6-react-components';
+import { useGraphWrapper } from "../../hooks";
+import '@antv/x6-react-components/es/split-box/style/index.css';
+import styles from "./index.module.less";
+import { MIN_ZOOM } from "../../constant";
+import { GraphContext } from "../../context/GraphContext";
+var Layout = function Layout(props) {
+  var flowGraph = props.flowGraph,
+    SideBar = props.SideBar,
+    ToolBar = props.ToolBar,
+    SettingBar = props.SettingBar,
+    widgets = props.widgets;
+  var _useContext = useContext(GraphContext),
+    chainObject = _useContext.chainObject;
+  var _useState = useState('22%'),
+    _useState2 = _slicedToArray(_useState, 2),
+    settingBarWidth = _useState2[0],
+    setSettingBarWidth = _useState2[1];
+  var _useState3 = useState('22%'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    sideBarWidth = _useState4[0],
+    setSideBarWidth = _useState4[1];
+  var wrapperRef = useGraphWrapper();
+  var handleResize = function handleResize() {
+    if (flowGraph && wrapperRef && wrapperRef.current) {
+      var width = wrapperRef.current.clientWidth;
+      var height = wrapperRef.current.clientHeight;
+      flowGraph.resize(width, height);
+      flowGraph.zoomToFit({
+        minScale: MIN_ZOOM,
+        maxScale: 1
+      });
+    }
+  };
+  var sideBar, toolBar, settingBar;
+  if (flowGraph) {
+    sideBar = /*#__PURE__*/React.createElement(SideBar, {
+      flowGraph: flowGraph
+    });
+    toolBar = /*#__PURE__*/React.createElement(ToolBar, {
+      flowGraph: flowGraph,
+      widgets: widgets
+    });
+    settingBar = /*#__PURE__*/React.createElement(SettingBar, {
+      flowGraph: flowGraph
+    });
+  }
+  useEffect(function () {
+    if (flowGraph && wrapperRef && wrapperRef.current) {
+      if (!chainObject.hasPermission) {
+        setSideBarWidth('0%');
+        setSettingBarWidth('25%');
+        setTimeout(function () {
+          handleResize();
+        }, 200);
+      }
+      flowGraph.on('node:selected', function () {
+        setSideBarWidth('0%');
+        setSettingBarWidth('60%');
+        setTimeout(function () {
+          handleResize();
+        }, 0);
+      });
+      flowGraph.on('node:unselected', function () {
+        if (!chainObject.hasPermission) {
+          setSideBarWidth('0%');
+          setSettingBarWidth('25%');
+          setTimeout(function () {
+            handleResize();
+          }, 0);
+        } else {
+          setSideBarWidth('22%');
+          setSettingBarWidth('22%');
+          setTimeout(function () {
+            handleResize();
+          }, 0);
+        }
+      });
+    }
+    return function () {
+      if (flowGraph) {
+        flowGraph.off('node:selected');
+        flowGraph.off('node:unselected');
+      }
+    };
+  }, [flowGraph]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorLayoutContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorToolBar
+  }, toolBar), /*#__PURE__*/React.createElement(SplitBox, {
+    split: 'vertical',
+    resizable: false,
+    defaultSize: sideBarWidth,
+    primary: "first",
+    onResizing: handleResize,
+    boxStyle: {
+      transition: 'width 0.2s ease-in-out'
+    }
+  }, chainObject.hasPermission && /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorSideBar
+  }, sideBar), /*#__PURE__*/React.createElement(SplitBox, {
+    split: 'vertical',
+    minSize: 300,
+    defaultSize: settingBarWidth,
+    primary: "second",
+    onResizing: handleResize,
+    boxStyle: {
+      transition: 'width 0.2s ease-in-out'
+    }
+  }, props.children, /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorSettingBar
+  }, settingBar))));
+};
+export default Layout;

package/dist/LiteFlowEditor/panels/layout/index.module.less

@@ -0,0 +1,30 @@
+.liteflowEditorLayoutContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .liteflowEditorToolBar {
+    height: 43px;
+  }
+
+  .liteflowEditorSideBar {
+    border-right: 1px solid #d9d9d9;
+    height: 100%;
+    overflow: auto;
+  }
+
+  .liteflowEditorSideBar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .liteflowEditorSettingBar {
+    height: 100%;
+    border-left: 1px solid #d9d9d9;
+  }
+  :global {
+    .x6-split-box-item-second {
+      z-index: 2 !important;
+    }
+  }
+}

package/dist/LiteFlowEditor/panels/settingBar/basic/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+interface IProps {
+    flowGraph: Graph;
+}
+declare const Basic: React.FC<IProps>;
+export default Basic;

package/dist/LiteFlowEditor/panels/settingBar/basic/index.js

@@ -0,0 +1,50 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { useModel } from "../../../hooks/useModel";
+import { Empty } from 'antd';
+import { useTranslation } from 'react-i18next';
+var Basic = function Basic(props) {
+  var _useModel;
+  var flowGraph = props.flowGraph;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useState = useState((_useModel = useModel()) === null || _useModel === void 0 ? void 0 : _useModel.toEL(' ')),
+    _useState2 = _slicedToArray(_useState, 2),
+    elString = _useState2[0],
+    setELString = _useState2[1];
+  useEffect(function () {
+    var handleModelChange = function handleModelChange() {
+      var _useModel2;
+      setELString((_useModel2 = useModel()) === null || _useModel2 === void 0 ? void 0 : _useModel2.toEL(' '));
+    };
+    flowGraph.on('model:change', handleModelChange);
+    return function () {
+      flowGraph.off('model:change', handleModelChange);
+    };
+  }, [flowGraph, setELString]);
+  return (
+    /*#__PURE__*/
+    // <div className={styles.liteflowEditorBasicContainer}>
+    //   <div className={styles.liteflowEditorTitle}>EL表达式：</div>
+    //   <div className={styles.elContentWrapper}>
+    //     <pre>{elString}</pre>
+    //   </div>
+    // </div>
+    React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '100px'
+      }
+    }), /*#__PURE__*/React.createElement(Empty, {
+      image: "https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg",
+      imageStyle: {
+        height: 60
+      },
+      description: /*#__PURE__*/React.createElement("span", null, t('node_attribute_tips'))
+    }), /*#__PURE__*/React.createElement("pre", {
+      style: {
+        opacity: 0
+      }
+    }, elString))
+  );
+};
+export default Basic;

package/dist/LiteFlowEditor/panels/settingBar/basic/index.module.less

@@ -0,0 +1,17 @@
+.liteflowEditorBasicContainer {
+  height: auto;
+  // overflow-y: auto;
+  padding: 10px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+.liteflowEditorTitle {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+}
+.elContentWrapper {
+  margin-top: 10px;
+  margin-left: -8px;
+}

package/dist/LiteFlowEditor/panels/settingBar/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Graph } from '@antv/x6';
+interface IProps {
+    flowGraph: Graph;
+}
+declare const SettingBar: React.FC<IProps>;
+export default SettingBar;

package/dist/LiteFlowEditor/panels/settingBar/index.js

@@ -0,0 +1,219 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect, useReducer } from 'react';
+import { Tabs, message } from 'antd';
+import { useModel } from "../../hooks/useModel";
+import Basic from "./basic";
+import { ComponentPropertiesEditor, ConditionPropertiesEditor } from "./properties";
+// import Outline from './outline';
+import Parameters from "./parameters";
+import NodeOperator from "../../model/el/node-operator";
+import styles from "./index.module.less";
+import { useScriptContext } from "../../context/ScriptContext";
+import { useTranslation } from 'react-i18next';
+var TabPane = Tabs.TabPane;
+var SettingBar = function SettingBar(_ref) {
+  var _currentModel;
+  var flowGraph = _ref.flowGraph;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedModel = _useState2[0],
+    setSelectedModel = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    paramsList = _useState4[0],
+    setParamsList = _useState4[1];
+  var _useState5 = useState('properties'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    tabKeys = _useState6[0],
+    setTabKeys = _useState6[1];
+  var _useScriptContext = useScriptContext(),
+    logFieldsData = _useScriptContext.logFieldsData;
+  var _message$useMessage = message.useMessage(),
+    _message$useMessage2 = _slicedToArray(_message$useMessage, 2),
+    messageApi = _message$useMessage2[0],
+    contextHolder = _message$useMessage2[1];
+  var model = useModel();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var forceUpdate = useReducer(function (n) {
+    return n + 1;
+  }, 0)[1];
+  var findLabelById = function findLabelById(data, targetId) {
+    if (targetId.includes('user_added_')) {
+      return targetId.replace('user_added_', '');
+    }
+    var _iterator = _createForOfIteratorHelper(data),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        if (item.id === targetId) {
+          return item.label;
+        }
+        if (Array.isArray(item.children)) {
+          var result = findLabelById(item.children, targetId);
+          if (result) return result;
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return null; // 没找到返回 null
+  };
+  var generateUniqueId = function generateUniqueId() {
+    var timestamp = Date.now().toString(36).slice(-4);
+    var randomStr = Math.random().toString(36).slice(2, 6);
+    return timestamp + randomStr;
+  };
+  var changeParams = function changeParams(params) {
+    setParamsList(params);
+  };
+
+  /**
+   * @description: 使用正则匹配括号内的内容
+   * @param {string} text
+   * @return {*}
+  */
+  var extractTextInParentheses = function extractTextInParentheses(text) {
+    var match = text.match(/\(([^)]+)\)/);
+    return match ? match[1] : text;
+  };
+  var handleTabClick = function handleTabClick(key) {
+    if (key === 'properties') {
+      if (paramsList.some(function (i) {
+        return !i.name;
+      })) {
+        return messageApi.open({
+          type: 'warning',
+          content: t('parameter_name_not_selected')
+        });
+      }
+      if (paramsList.some(function (i) {
+        return !i.type;
+      })) {
+        return messageApi.open({
+          type: 'warning',
+          content: t('parameter_type_not_selected')
+        });
+      }
+      if (paramsList.some(function (i) {
+        return i.type === 'select' && !i.logField;
+      })) {
+        return messageApi.open({
+          type: 'warning',
+          content: t('log_field_not_selected')
+        });
+      }
+      if (paramsList.some(function (i) {
+        return !i.description;
+      })) {
+        return messageApi.open({
+          type: 'warning',
+          content: t('parameter_description_not_input')
+        });
+      }
+      // if (paramsList.some(i => !/^[\u4e00-\u9fa5]*$/.test(i.description))) {
+      //   return messageApi.open({
+      //     type: 'warning',
+      //     content: '参数描述只能填写中文!'
+      //   });
+      // }
+    }
+    setTabKeys(key);
+  };
+  useEffect(function () {
+    var handler = function handler() {
+      setSelectedModel(null);
+      forceUpdate();
+    };
+    var handleSelect = function handleSelect(component) {
+      setSelectedModel(component);
+    };
+    flowGraph.on('settingBar:forceUpdate', handler);
+    flowGraph.on('model:select', handleSelect);
+    return function () {
+      flowGraph.off('settingBar:forceUpdate', handler);
+      flowGraph.off('model:select', handleSelect);
+    };
+  }, [flowGraph]);
+  useEffect(function () {
+    if (!model) {
+      return;
+    }
+    if (model.children && model.children[0] && model.children[0].properties && model.children[0].properties.data) {
+      var data = JSON.parse(model.children[0].properties.data);
+      var floatData = [];
+      logFieldsData.forEach(function (v) {
+        floatData.push.apply(floatData, _toConsumableArray(v.children));
+      });
+      var list = [];
+      Object.keys(data).map(function (key) {
+        data[key].forEach(function (item) {
+          if (list.findIndex(function (v) {
+            return extractTextInParentheses(v.name) === item.variableName;
+          }) === -1) {
+            var _floatData$find;
+            list.push({
+              id: generateUniqueId(),
+              key: list.length + 1 + '',
+              name: "".concat(findLabelById(logFieldsData, item.variableName), "(").concat(item.variableName, ")"),
+              type: item.variableType,
+              logField: item.variableSelect,
+              description: item.variableDescription,
+              action: list.length + 1,
+              selectIsOpen: false,
+              fieldsType: (_floatData$find = floatData.find(function (v) {
+                return v.id === item.variableSelect;
+              })) === null || _floatData$find === void 0 ? void 0 : _floatData$find.fieldsType
+            });
+          }
+        });
+      });
+      // console.log(list, 'list');
+      changeParams(list);
+    }
+  }, [model]);
+  var nodes = flowGraph.getSelectedCells().filter(function (v) {
+    return !v.isEdge();
+  });
+  var currentModel;
+  if (selectedModel || nodes.length === 1) {
+    currentModel = selectedModel || nodes[0].getData().model;
+    currentModel = currentModel.proxy || currentModel;
+  }
+  var propertiesPanel = /*#__PURE__*/React.createElement(Basic, {
+    flowGraph: flowGraph
+  });
+  if ((_currentModel = currentModel) !== null && _currentModel !== void 0 && _currentModel.parent) {
+    if (Object.getPrototypeOf(currentModel) === NodeOperator.prototype) {
+      propertiesPanel = /*#__PURE__*/React.createElement(ComponentPropertiesEditor, {
+        flowGraph: flowGraph,
+        model: currentModel,
+        paramsList: paramsList
+      });
+    } else {
+      propertiesPanel = /*#__PURE__*/React.createElement(ConditionPropertiesEditor, {
+        model: currentModel
+      });
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorSettingBarContainer
+  }, contextHolder, /*#__PURE__*/React.createElement(Tabs, {
+    activeKey: tabKeys,
+    onTabClick: handleTabClick
+  }, /*#__PURE__*/React.createElement(TabPane, {
+    tab: t('node_attribute'),
+    key: 'properties'
+  }, propertiesPanel), /*#__PURE__*/React.createElement(TabPane, {
+    tab: t('workflow_parameters'),
+    key: 'parameters'
+  }, /*#__PURE__*/React.createElement(Parameters, {
+    changeParams: changeParams
+  }))));
+};
+export default SettingBar;