liteflow-editor-process 1.0.0

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

@@ -0,0 +1,45 @@
+.liteflowEditorSettingBarContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  :global {
+
+    .ant-tabs{
+      height: 100%;
+      .ant-tabs-content-holder{
+        flex: 1;
+        overflow: hidden;
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
+
+    .ant-tabs-nav {
+      margin-bottom: 0;
+    }
+    .ant-tabs-nav-wrap {
+      flex: 1;
+      justify-content: center;
+      align-items: center;
+      background-color: #fafafa;
+      border-bottom: 1px solid #d9d9d9;
+    }
+    // .ant-tabs-nav-list {
+    //   display: flex;
+    //   flex: 1;
+    // }
+
+    // .ant-tabs-tab {
+    //   display: flex;
+    //   flex: 1;
+    //   justify-content: center;
+    //   align-items: center;
+    //   padding: 10px 0;
+    //   background-color: #fafafa;
+    // }
+  }
+}

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

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

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

@@ -0,0 +1,124 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { StringExt } from '@antv/x6';
+import { Tree } from 'antd';
+import { useModel } from "../../../hooks/useModel";
+import { getIconByType } from "../../../cells";
+import styles from "./index.module.less";
+var TreeNodeTitle = function TreeNodeTitle(_ref) {
+  var model = _ref.model,
+    onClick = _ref.onClick;
+  var id = model.id,
+    type = model.type;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.liteflowEditorOutlineTitle),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", null, id ? "".concat(id, " : ").concat(type) : type));
+};
+var Outline = function Outline(props) {
+  var flowGraph = props.flowGraph;
+  var model = useModel();
+  var initialkeys = [];
+  var _useState = useState(model ? [transformer(model, initialkeys)] : []),
+    _useState2 = _slicedToArray(_useState, 2),
+    treeData = _useState2[0],
+    setTreeData = _useState2[1];
+  var _useState3 = useState(initialkeys),
+    _useState4 = _slicedToArray(_useState3, 2),
+    expandedKeys = _useState4[0],
+    setExpandedKeys = _useState4[1];
+  function onTreeExpand(expandedKeys) {
+    setExpandedKeys(expandedKeys);
+  }
+  function transformer(currentModel, keys) {
+    var handleClick = function handleClick() {
+      // 始终递归展开节点，再选中
+      function findParentCollapsed(currentModel) {
+        if (currentModel.parent) {
+          var parent = currentModel.parent;
+          parent.toggleCollapse(false);
+          findParentCollapsed(parent);
+        }
+      }
+      findParentCollapsed(currentModel);
+
+      // 移除触发 model:change 事件
+      // flowGraph.trigger('model:change');
+
+      // 找到了选中的节点
+      var node;
+      var nodes = currentModel === null || currentModel === void 0 ? void 0 : currentModel.getNodes();
+      if (nodes && nodes.length > 0) {
+        node = nodes[0];
+        if (node) {
+          flowGraph.positionCell(node, 'left', {
+            padding: {
+              left: 240
+            }
+          });
+        }
+      }
+      flowGraph.cleanSelection();
+      flowGraph.trigger('model:select', currentModel);
+      flowGraph.select(nodes);
+    };
+    var key = "".concat(currentModel.type, "-").concat(StringExt.uuid());
+    keys.push(key);
+    var node = {
+      title: /*#__PURE__*/React.createElement(TreeNodeTitle, {
+        model: currentModel,
+        onClick: handleClick
+      }),
+      key: key,
+      icon: /*#__PURE__*/React.createElement("div", {
+        className: styles.liteflowEditorOutlineIcon,
+        onClick: handleClick
+      }, /*#__PURE__*/React.createElement("img", {
+        className: styles.liteflowEditorOutlineImage,
+        src: getIconByType(currentModel.type)
+      }))
+    };
+    node.children = [];
+    if (currentModel.condition) {
+      node.children.push(transformer(currentModel.condition, keys));
+    }
+    if (currentModel.children) {
+      node.children = node.children.concat(currentModel.children.map(function (item) {
+        return transformer(item, keys);
+      }));
+    }
+    return node;
+  }
+  useEffect(function () {
+    var handleModelChange = function handleModelChange() {
+      var model = useModel();
+      if (model) {
+        var keys = [];
+        setTreeData([transformer(model, keys)]);
+        // 重新设置展开的键，让节点全部展开
+        setExpandedKeys(keys);
+        return;
+      }
+      setTreeData([]);
+    };
+    flowGraph.on('model:change', handleModelChange);
+    return function () {
+      flowGraph.off('model:change', handleModelChange);
+    };
+  }, [flowGraph, setTreeData]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorOutlineContainer
+  }, /*#__PURE__*/React.createElement(Tree, {
+    blockNode: true,
+    showIcon: true,
+    showLine: {
+      showLeafIcon: false
+    },
+    expandedKeys: expandedKeys,
+    onExpand: onTreeExpand,
+    selectedKeys: [],
+    treeData: treeData
+  }));
+};
+export default Outline;

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

@@ -0,0 +1,39 @@
+.liteflowEditorOutlineContainer {
+  height: auto;
+  // overflow-y: auto;
+  padding: 10px;
+
+  .liteflowEditorOutlineIcon {
+    .liteflowEditorOutlineImage {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .liteflowEditorOutlineTitle {
+    padding-left: 4px;
+    height: 30px;
+    line-height: 30px;
+    vertical-align: middle;
+  }
+
+  :global {
+    .ant-tree .ant-tree-treenode {
+      white-space: nowrap;
+    }
+    .ant-tree .ant-tree-node-content-wrapper {
+      display: flex;
+    }
+    .ant-tree-title {
+      flex: 1;
+      transform: translateY(-2px);
+    }
+    .ant-tree-iconEle.ant-tree-icon__customize {
+      transform: translateY(-2px);
+    }
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IProps {
+    changeParams: Function;
+}
+declare const Parameters: React.FC<IProps>;
+export default Parameters;

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

@@ -0,0 +1,415 @@
+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, useRef, useContext } from 'react';
+import styles from "./index.module.less";
+import { Table, Input, Select, Button, message, Divider, Space } from 'antd';
+import { DeleteFilled, PlusOutlined } from '@ant-design/icons';
+import { useModel } from "../../../hooks/useModel";
+import { useScriptContext } from "../../../context/ScriptContext";
+import GraphContext from "../../../context/GraphContext";
+import { extractTextInParentheses } from "../../../utils";
+import { useTranslation } from 'react-i18next';
+var Parameters = function Parameters(_ref) {
+  var changeParams = _ref.changeParams;
+  var _useContext = useContext(GraphContext),
+    chainObject = _useContext.chainObject;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    paramsList = _useState2[0],
+    setParamsList = _useState2[1];
+  var _message$useMessage = message.useMessage(),
+    _message$useMessage2 = _slicedToArray(_message$useMessage, 2),
+    messageApi = _message$useMessage2[0],
+    contextHolder = _message$useMessage2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    newFields = _useState4[0],
+    setNewFields = _useState4[1];
+  var _useScriptContext = useScriptContext(),
+    register = _useScriptContext.register,
+    logFieldsData = _useScriptContext.logFieldsData;
+  var inputRef = useRef(null);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var model = useModel();
+  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;
+  };
+  useEffect(function () {
+    var _model$children;
+    if ((_model$children = model.children) !== null && _model$children !== void 0 && (_model$children = _model$children[0]) !== null && _model$children !== void 0 && (_model$children = _model$children.properties) !== null && _model$children !== void 0 && _model$children.data) {
+      var data = JSON.parse(model.children[0].properties.data);
+      var list = [];
+      var floatData = [];
+      logFieldsData.forEach(function (v) {
+        floatData.push.apply(floatData, _toConsumableArray(v.children));
+      });
+      Object.keys(data).map(function (key) {
+        data[key].forEach(function (item) {
+          if (list.findIndex(function (v) {
+            return v.name === "".concat(findLabelById(logFieldsData, item.variableName), "(").concat(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
+            });
+          }
+        });
+      });
+      setParamsList(list);
+    } else {
+      setParamsList([]);
+    }
+  }, []);
+
+  // 模拟实例
+  var instance = {
+    getParams: function getParams() {
+      return paramsList;
+    }
+  };
+  useEffect(function () {
+    register(instance); // 参数数组发生改变就向上注册自己
+    changeParams(paramsList);
+  }, [paramsList]);
+  var handleNameChange = function handleNameChange(index, value) {
+    var newParamsList = _toConsumableArray(paramsList);
+    if (!value.includes('user_added_')) {
+      var _floatData$find2;
+      var floatData = [];
+      logFieldsData.forEach(function (v) {
+        floatData.push.apply(floatData, _toConsumableArray(v.children));
+      });
+      newParamsList[index].type = (_floatData$find2 = floatData.find(function (v) {
+        return v.id === extractTextInParentheses(value);
+      })) === null || _floatData$find2 === void 0 ? void 0 : _floatData$find2.fieldsType;
+    } else {
+      newParamsList[index].type = '';
+    }
+    newParamsList[index].name = value;
+    setParamsList(newParamsList);
+  };
+  var onNewFieldsChange = function onNewFieldsChange(e) {
+    setNewFields(e.target.value);
+  };
+  var handleTypeChange = function handleTypeChange(index, value) {
+    var newParamsList = _toConsumableArray(paramsList);
+    if (value !== 'select') {
+      newParamsList[index].logField = '';
+    }
+    newParamsList[index].type = value;
+    setParamsList(newParamsList);
+  };
+  var handleDescriptionChange = function handleDescriptionChange(index, e) {
+    var value = e.target.value;
+    var newParamsList = _toConsumableArray(paramsList);
+    newParamsList[index].description = value;
+    setParamsList(newParamsList);
+  };
+  var addNewFields = function addNewFields(index) {
+    if (!newFields) {
+      messageApi.open({
+        type: 'warning',
+        content: t('parameter_name_input_placeholder')
+      });
+      return;
+    }
+    if (paramsList.findIndex(function (v) {
+      return v.name === "".concat(newFields, "(").concat('user_added_' + newFields, ")");
+    }) !== -1) {
+      messageApi.open({
+        type: 'warning',
+        content: t('parameter_name_exist')
+      });
+      return;
+    }
+    logFieldsData[logFieldsData.length - 1].children.push({
+      label: newFields,
+      id: 'user_added_' + newFields
+    });
+    var newParamsList = _toConsumableArray(paramsList);
+    newParamsList[index].type = '';
+    newParamsList[index].name = "".concat(newFields, "(").concat('user_added_' + newFields, ")");
+    newParamsList[index].selectIsOpen = false;
+    setParamsList(newParamsList);
+    setNewFields('');
+  };
+  var _onDropdownVisibleChange = function onDropdownVisibleChange(index, visible) {
+    var newParamsList = _toConsumableArray(paramsList);
+    newParamsList[index].selectIsOpen = visible;
+    setParamsList(newParamsList);
+  };
+  var handleLogFieldChange = function handleLogFieldChange(index, value) {
+    var _floatData$find3;
+    var newParamsList = _toConsumableArray(paramsList);
+    var floatData = [];
+    logFieldsData.forEach(function (v) {
+      floatData.push.apply(floatData, _toConsumableArray(v.children));
+    });
+    newParamsList[index].fieldsType = (_floatData$find3 = floatData.find(function (v) {
+      return v.id === value;
+    })) === null || _floatData$find3 === void 0 ? void 0 : _floatData$find3.fieldsType;
+    newParamsList[index].logField = value;
+    setParamsList(newParamsList);
+  };
+  var columns = [{
+    title: t('parameter_name'),
+    dataIndex: 'name',
+    key: 'name',
+    width: '30%',
+    render: function render(text, record) {
+      var index = paramsList.findIndex(function (item) {
+        return item.key === record.key;
+      });
+      return /*#__PURE__*/React.createElement(Select, {
+        showSearch: true,
+        placeholder: t('parameter_name_placeholder'),
+        style: {
+          width: '100%'
+        },
+        value: text || undefined,
+        open: paramsList[index].selectIsOpen,
+        disabled: !chainObject.isEdit,
+        onDropdownVisibleChange: function onDropdownVisibleChange(visible) {
+          _onDropdownVisibleChange(index, visible);
+        },
+        onChange: function onChange(value) {
+          return handleNameChange(index, value);
+        },
+        dropdownRender: function dropdownRender(menu) {
+          return /*#__PURE__*/React.createElement(React.Fragment, null, menu, /*#__PURE__*/React.createElement(Divider, {
+            style: {
+              margin: '8px 0'
+            }
+          }), /*#__PURE__*/React.createElement(Space, {
+            style: {
+              padding: '0 8px 4px'
+            }
+          }, /*#__PURE__*/React.createElement(Input, {
+            placeholder: t('parameter_name_input_placeholder'),
+            ref: inputRef,
+            value: newFields,
+            onChange: onNewFieldsChange
+          }), /*#__PURE__*/React.createElement(Button, {
+            type: "text",
+            icon: /*#__PURE__*/React.createElement(PlusOutlined, null),
+            onClick: function onClick() {
+              addNewFields(index);
+            }
+          }, t('add'))));
+        },
+        options: logFieldsData.map(function (item) {
+          return {
+            label: item.label,
+            options: item.children.map(function (child) {
+              return {
+                label: child.label,
+                value: child.label + "(".concat(child.id, ")"),
+                disabled: paramsList.findIndex(function (v) {
+                  return v.name === child.label + "(".concat(child.id, ")");
+                }) !== -1
+              };
+            })
+          };
+        })
+      });
+    }
+  }, {
+    title: t('parameter_type'),
+    dataIndex: 'type',
+    key: 'type',
+    width: '20%',
+    align: 'center',
+    render: function render(text, record) {
+      var index = paramsList.findIndex(function (item) {
+        return item.key === record.key;
+      });
+      return /*#__PURE__*/React.createElement(Select, {
+        placeholder: t('parameter_type_placeholder'),
+        style: {
+          width: '100%'
+        },
+        value: text,
+        onChange: function onChange(value) {
+          return handleTypeChange(index, value);
+        },
+        disabled: !paramsList[index].name || !chainObject.isEdit || !paramsList[index].name.includes('user_added')
+      }, /*#__PURE__*/React.createElement(Select.Option, {
+        value: "input"
+      }, "input"), /*#__PURE__*/React.createElement(Select.Option, {
+        value: "select"
+      }, "select"), /*#__PURE__*/React.createElement(Select.Option, {
+        value: "time"
+      }, "time"));
+    }
+  }, {
+    title: t('log_field'),
+    dataIndex: 'logField',
+    key: 'logField',
+    width: '25%',
+    align: 'center',
+    render: function render(text, record) {
+      var index = paramsList.findIndex(function (item) {
+        return item.key === record.key;
+      });
+      return /*#__PURE__*/React.createElement(Select, {
+        showSearch: true,
+        placeholder: t('log_field_placeholder'),
+        style: {
+          width: '100%'
+        },
+        value: text,
+        onChange: function onChange(value) {
+          handleLogFieldChange(index, value);
+        },
+        disabled: paramsList[index].type !== 'select' || !chainObject.isEdit,
+        options: logFieldsData.map(function (item) {
+          return {
+            label: item.label,
+            options: item.children.filter(function (i) {
+              return !i.id.includes('user_added');
+            }).map(function (child) {
+              return {
+                label: child.label,
+                value: child.id
+              };
+            })
+          };
+        })
+      });
+    }
+  }, {
+    title: t('parameter_description'),
+    dataIndex: 'description',
+    key: 'description',
+    width: '30%',
+    render: function render(text, record) {
+      var index = paramsList.findIndex(function (item) {
+        return item.key === record.key;
+      });
+      return /*#__PURE__*/React.createElement(Input, {
+        placeholder: t('parameter_description_input_placeholder'),
+        value: text,
+        disabled: !chainObject.isEdit
+        // disabled={getCurrentIsUse(paramsList[index].action)}
+        ,
+        onChange: function onChange(e) {
+          return handleDescriptionChange(index, e);
+        }
+      });
+    }
+  }, {
+    title: t('operation'),
+    key: 'action',
+    align: 'center',
+    render: function render(_, record) {
+      return /*#__PURE__*/React.createElement(DeleteFilled, {
+        onClick: function onClick() {
+          return handleDelete(record.action);
+        },
+        disabled: !chainObject.isEdit
+      });
+    }
+  }];
+  var getCurrentIsUse = function getCurrentIsUse(action) {
+    var modelJson = model.toJSON();
+    var paramData = paramsList.find(function (item) {
+      return item.action === action;
+    });
+    var isUse = false;
+    if (modelJson && modelJson.properties && modelJson.properties.data && paramData !== null && paramData !== void 0 && paramData.name) {
+      var data = JSON.parse(modelJson.properties.data);
+      isUse = Object.keys(data).some(function (key) {
+        return data[key].findIndex(function (item) {
+          return item.variableName === (paramData === null || paramData === void 0 ? void 0 : paramData.name.split('(')[1].split(')')[0]);
+        }) !== -1 ? true : false;
+      });
+    }
+    return isUse;
+  };
+  var handleDelete = function handleDelete(action) {
+    if (getCurrentIsUse(action)) {
+      messageApi.open({
+        type: 'warning',
+        content: t('delete_warning')
+      });
+      return;
+    }
+    setParamsList(paramsList.filter(function (item) {
+      return item.action !== action;
+    }));
+    messageApi.open({
+      type: 'success',
+      content: t('delete_success')
+    });
+  };
+  var handleAdd = function handleAdd() {
+    var newAction = Math.max.apply(Math, _toConsumableArray(paramsList.map(function (item) {
+      return item.action;
+    })).concat([0])) + 1;
+    setParamsList([].concat(_toConsumableArray(paramsList), [{
+      id: generateUniqueId(),
+      name: "",
+      type: '',
+      description: "",
+      // required: true,
+      action: newAction,
+      logField: '',
+      key: "".concat(newAction),
+      selectIsOpen: false
+    }]));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorParametersContainer
+  }, contextHolder, /*#__PURE__*/React.createElement(Table, {
+    columns: columns,
+    dataSource: paramsList,
+    pagination: false
+  }), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: handleAdd,
+    style: {
+      marginTop: '20px',
+      borderRadius: '4px'
+    },
+    disabled: !chainObject.isEdit
+  }, t('add_parameter')));
+};
+export default Parameters;

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

@@ -0,0 +1,4 @@
+.liteflowEditorParametersContainer{
+    width: 100%;
+    padding: 10px;
+}

package/dist/LiteFlowEditor/panels/settingBar/properties/CustomDropdown.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface CustomDropdownProps {
+    open: boolean;
+    position: {
+        top: number;
+        left: number;
+        width?: number | string;
+    };
+    onClose: () => void;
+    children: React.ReactNode;
+}
+declare const CustomDropdown: React.FC<CustomDropdownProps>;
+export default CustomDropdown;