liteflow-editor-process 1.0.0

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import ELNode from '../../../model/node';
+interface IProps {
+    model: ELNode;
+}
+declare const ConditionPropertiesEditor: React.FC<IProps>;
+export default ConditionPropertiesEditor;

package/dist/LiteFlowEditor/panels/settingBar/properties/condition.js

@@ -0,0 +1,54 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+import { Form } from 'antd';
+import { debounce } from 'lodash';
+import { history } from "../../../hooks/useHistory";
+import styles from "./index.module.less";
+var WHEN_ANY_TRUE = true;
+var WHEN_ANY_FALSE = false;
+var ConditionPropertiesEditor = function ConditionPropertiesEditor(props) {
+  var model = props.model;
+  var properties = model.getProperties();
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var handleOnChange = debounce( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var changedValues;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.prev = 0;
+          _context.next = 3;
+          return form.validateFields();
+        case 3:
+          changedValues = _context.sent;
+          // console.log(changedValues);
+          model.setProperties(_objectSpread(_objectSpread({}, properties), changedValues));
+          history.push(undefined, {
+            silent: true
+          });
+          _context.next = 11;
+          break;
+        case 8:
+          _context.prev = 8;
+          _context.t0 = _context["catch"](0);
+          console.log('Failed:', _context.t0);
+        case 11:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[0, 8]]);
+  })), 200);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorPropertiesEditorContainer
+  }, /*#__PURE__*/React.createElement(Form, {
+    layout: "vertical",
+    form: form,
+    initialValues: _objectSpread({}, properties),
+    onValuesChange: handleOnChange
+  }));
+};
+export default ConditionPropertiesEditor;

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

@@ -0,0 +1,2 @@
+export { default as ComponentPropertiesEditor } from './component';
+export { default as ConditionPropertiesEditor } from './condition';

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

@@ -0,0 +1,2 @@
+export { default as ComponentPropertiesEditor } from "./component";
+export { default as ConditionPropertiesEditor } from "./condition";

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

@@ -0,0 +1,149 @@
+.liteflowEditorPropertiesEditorContainer {
+  // height: 900px;
+  // overflow-y: auto;
+  padding: 10px;
+
+  :global {
+    .ant-form-item {
+      margin-bottom: 8px;
+    }
+
+    .ant-input-number {
+      width: 100%;
+    }
+  }
+
+  .liteflowEditorPropertiesInformation {
+    padding: 0 12px;
+  }
+
+  .liteflowEditorPropertiesDataPropertyInformation {
+    padding-left: 8px;
+  }
+
+  .flexBox {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .filterList {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    flex: 0.97;
+
+    .filterItem {
+      width: 48%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px 16px;
+      background-color: #fff;
+      border: 1px solid #d9d9d9;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      transition: box-shadow 0.2s ease, border-color 0.2s ease;
+
+      &:hover {
+        border-color: #409eff;
+        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+      }
+
+      .filterItemLeft {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+        line-height: 1.4;
+
+        >span:first-child {
+          font-weight: 600;
+          color: #333;
+        }
+
+        >span:nth-child(2) {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-word;
+          color: #666;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .aggList{
+    display: flex;
+    // flex-direction: column;
+    gap: 12px;
+    flex: 0.97;
+    flex-wrap: wrap;
+
+   .aggItem {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px 16px;
+      background-color: #fff;
+      border: 1px solid #d9d9d9;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+      transition: box-shadow 0.2s ease, border-color 0.2s ease;
+      &:hover {
+        border-color: #409eff;
+        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
+      }
+     .aggItemLeft {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 6px;
+        line-height: 1.4;
+        >span:first-child {
+          font-weight: 600;
+          color: #333;
+        }
+        >span:nth-child(2) {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          word-break: break-word;
+          color: #666;
+          font-size: 14px;
+        }
+     }
+   }
+  }
+
+  .fieldLabel{
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .operationBox{
+    display: flex;
+    align-items: center;
+    gap: 28px;
+    flex: 1;
+    justify-content: flex-end;
+    margin-right: 20px;
+  }
+  // .listItem:active{
+  //   cursor: grabbing !important;
+  // }
+  // .listItem:hover{
+  //   background-color: #e6f7ff47 !important;
+  // }
+}

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

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

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

@@ -0,0 +1,153 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _excluded = ["node", "icon"];
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Collapse } from 'antd';
+import { Addon, Node } from '@antv/x6';
+import classNames from 'classnames';
+import { NODE_GROUP, SEQUENCE_GROUP, BRANCH_GROUP, CONTROL_GROUP
+// OTHER_GROUP,
+} from "../../cells";
+import { findViewsFromPoint } from "../../common/events";
+import ELBuilder from "../../model/builder";
+import styles from "./index.module.less";
+import { history } from "../../hooks/useHistory";
+import { useTranslation } from 'react-i18next';
+var Panel = Collapse.Panel;
+var SideBar = function SideBar(props) {
+  var flowGraph = props.flowGraph;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var lastEdgeRef = useRef(null);
+  useEffect(function () {
+    var handleSetLastEdge = function handleSetLastEdge(args) {
+      lastEdgeRef.current = args.edge;
+    };
+    var handleResetLastEdge = function handleResetLastEdge() {
+      lastEdgeRef.current = null;
+    };
+    flowGraph.on('edge:mouseover', handleSetLastEdge);
+    flowGraph.on('edge:mouseleave', handleResetLastEdge);
+    return function () {
+      flowGraph.off('edge:mouseover', handleSetLastEdge);
+      flowGraph.off('edge:mouseleave', handleResetLastEdge);
+    };
+  }, [flowGraph]);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    groups = _useState2[0],
+    setGroups = _useState2[1];
+  var dnd = useMemo(function () {
+    return new Addon.Dnd({
+      target: flowGraph,
+      scaled: true,
+      validateNode: function validateNode(droppingNode) {
+        var position = droppingNode.getPosition();
+        // console.log('position', position);
+        var size = droppingNode.getSize();
+        // console.log('size', size);
+        var _droppingNode$getData = droppingNode.getData(),
+          node = _droppingNode$getData.node;
+        // console.log('node', node);
+        var cellViewsFromPoint = findViewsFromPoint(flowGraph, position.x + size.width / 2, position.y + size.height / 2);
+        if (lastEdgeRef.current) {
+          var currentEdge = lastEdgeRef.current;
+          if (currentEdge) {
+            var targetNode = currentEdge.getTargetNode();
+            var _ref = (targetNode === null || targetNode === void 0 ? void 0 : targetNode.getData()) || {},
+              targetModel = _ref.model;
+            var sourceNode = currentEdge.getSourceNode();
+            var _ref2 = (sourceNode === null || sourceNode === void 0 ? void 0 : sourceNode.getData()) || {},
+              sourceModel = _ref2.model;
+            var inComingEdgesLength = (flowGraph.getIncomingEdges(targetNode) || []).length;
+            if (inComingEdgesLength > 1 || sourceModel && targetModel !== null && targetModel !== void 0 && targetModel.isParentOf(sourceModel)) {
+              sourceModel === null || sourceModel === void 0 || sourceModel.append(ELBuilder.createELNode(node.type, targetModel));
+            } else {
+              targetModel === null || targetModel === void 0 || targetModel.prepend(ELBuilder.createELNode(node.type, targetModel));
+            }
+            history.push();
+          }
+        }
+        var cellViews = cellViewsFromPoint.filter(function (cellView) {
+          return cellView.isNodeView();
+        }) || [];
+        if (cellViews && cellViews.length) {
+          var currentNode = flowGraph.getCellById(cellViews[cellViews.length - 1].cell.id);
+          if (currentNode) {
+            var _currentNode$getData = currentNode.getData(),
+              model = _currentNode$getData.model;
+            model === null || model === void 0 || model.replace(ELBuilder.createELNode(node.type));
+            history.push();
+          }
+        }
+        return false;
+      }
+    });
+  }, [flowGraph]);
+
+  // life
+  useEffect(function () {
+    setGroups([SEQUENCE_GROUP, BRANCH_GROUP, NODE_GROUP, CONTROL_GROUP]);
+  }, [setGroups]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorSideBarContainer
+  }, /*#__PURE__*/React.createElement(Collapse, {
+    className: styles.liteflowEditorSideBarCollapse,
+    defaultActiveKey: ['node', 'sequence', 'branch', 'control', 'other']
+  }, groups.map(function (group) {
+    return /*#__PURE__*/React.createElement(Panel, {
+      key: group.key,
+      header: t(group.name)
+    }, /*#__PURE__*/React.createElement(PanelContent, {
+      dnd: dnd,
+      cellTypes: group.cellTypes,
+      t: t
+    }));
+  })));
+};
+var View = function View(props) {
+  var node = props.node,
+    icon = props.icon,
+    rest = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: classNames(styles.liteflowShapeWrapper)
+  }, rest), /*#__PURE__*/React.createElement("img", {
+    className: styles.liteflowShapeSvg,
+    src: icon
+  }));
+};
+var PanelContent = function PanelContent(props) {
+  var dnd = props.dnd,
+    cellTypes = props.cellTypes,
+    t = props.t;
+  var _onMouseDown = function onMouseDown(evt, node) {
+    dnd.start(Node.create({
+      shape: node.shape,
+      data: {
+        node: node
+      }
+    }), evt);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorSideBarPanelContent
+  }, cellTypes.map(function (cellType, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: classNames(styles.liteflowEditorSideBarCellContainer, _defineProperty({}, styles.disabled, cellType.disabled))
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.liteflowEditorSideBarCellWrapper
+    }, /*#__PURE__*/React.createElement(View, {
+      icon: cellType.icon,
+      onMouseDown: function onMouseDown(evt) {
+        if (!cellType.disabled) {
+          _onMouseDown(evt, cellType);
+        }
+      }
+    })), /*#__PURE__*/React.createElement("p", {
+      className: styles.liteflowEditorSideBarCellTitle
+    }, t(cellType.label)));
+  }));
+};
+export default SideBar;

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

@@ -0,0 +1,48 @@
+@import '../../components/NodeView/index.module.less';
+
+.liteflowEditorSideBarContainer {
+  width: 100%;
+
+  :global {
+    .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+      padding: 10px 16px 10px 40px;
+    }
+  }
+
+  .liteflowEditorSideBarCollapse {
+    border: 0;
+    border-radius: 0;
+  }
+}
+
+.liteflowEditorSideBarPanelContent {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .liteflowEditorSideBarCellContainer {
+    margin: 8px;
+    width: 90px;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+  .liteflowEditorSideBarCellWrapper {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+  }
+
+  .liteflowEditorSideBarCellTitle {
+    font-size: 12px;
+    text-align: center;
+  }
+}

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

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

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

@@ -0,0 +1,42 @@
+import React, { useEffect, useReducer } from 'react';
+import widgets from "./widgets";
+import { useGraph } from "../../hooks";
+import styles from "./index.module.less";
+var ToolBar = function ToolBar(_ref) {
+  var customWidgets = _ref.widgets;
+  var flowGraph = useGraph();
+  var forceUpdate = useReducer(function (n) {
+    return n + 1;
+  }, 0)[1];
+  useEffect(function () {
+    flowGraph.on('toolBar:forceUpdate', forceUpdate);
+    return function () {
+      flowGraph.off('toolBar:forceUpdate');
+    };
+  }, [flowGraph]);
+  var customWidgetsGroup = null;
+  if (customWidgets && customWidgets.length) {
+    customWidgetsGroup = /*#__PURE__*/React.createElement("div", {
+      className: styles.liteflowEditorToolBarGroup
+    }, customWidgets.map(function (WidgetItem, index) {
+      return /*#__PURE__*/React.createElement(WidgetItem, {
+        key: index,
+        flowGraph: flowGraph
+      });
+    }));
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.liteflowEditorToolBarContainer
+  }, widgets.map(function (group, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: styles.liteflowEditorToolBarGroup
+    }, group.map(function (ToolItem, index) {
+      return /*#__PURE__*/React.createElement(ToolItem, {
+        key: index,
+        flowGraph: flowGraph
+      });
+    }));
+  }), customWidgetsGroup);
+};
+export default ToolBar;

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

@@ -0,0 +1,19 @@
+.liteflowEditorToolBarContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fafafa;
+  border-bottom: 1px solid #d9d9d9;
+
+  .liteflowEditorToolBarGroup {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 0 4px;
+    height: 100%;
+    border-right: 1px solid #d9d9d9;
+  }
+}

package/dist/LiteFlowEditor/panels/toolBar/widgets/check.d.ts

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

package/dist/LiteFlowEditor/panels/toolBar/widgets/check.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import makeBtnWidget from "./common/makeBtnWidget";
+import Icon from '@ant-design/icons';
+// import { Badge } from 'antd';
+import MyBadge from "./common/badge";
+var checkIconSvg = function checkIconSvg() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1.2em",
+    height: "1.2em",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8.00008 6V9H5.00008V6H8.00008ZM3.00008 4V11H10.0001V4H3.00008ZM13.0001 4H21.0001V6H13.0001V4ZM13.0001 11H21.0001V13H13.0001V11ZM13.0001 18H21.0001V20H13.0001V18ZM10.7072 16.2071L9.29297 14.7929L6.00008 18.0858L4.20718 16.2929L2.79297 17.7071L6.00008 20.9142L10.7072 16.2071Z"
+  }));
+};
+
+// 为 props 指定类型为 React.HTMLAttributes<HTMLElement>，避免隐式 any 类型
+var CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    component: checkIconSvg
+  }, props));
+};
+var Check = makeBtnWidget({
+  tooltip: 'view_check_items',
+  handler: function handler(flowGraph, props, checkList) {
+    console.log('checkList', checkList);
+  },
+  getIcon: function getIcon(flowGraph, checkList) {
+    return /*#__PURE__*/React.createElement(MyBadge, {
+      count: checkList.length,
+      color: "#faad14",
+      style: {
+        transform: 'translate(120%, -40%)'
+      }
+    }, /*#__PURE__*/React.createElement(CheckIcon, null));
+  }
+});
+export default Check;

package/dist/LiteFlowEditor/panels/toolBar/widgets/common/badge.d.ts

@@ -0,0 +1,12 @@
+import React, { CSSProperties, ReactNode } from 'react';
+interface MyBadgeProps {
+    count?: number;
+    showZero?: boolean;
+    dot?: boolean;
+    overflowCount?: number;
+    color?: string;
+    style?: CSSProperties;
+    children: ReactNode;
+}
+declare const MyBadge: React.FC<MyBadgeProps>;
+export default MyBadge;

package/dist/LiteFlowEditor/panels/toolBar/widgets/common/badge.js

@@ -0,0 +1,46 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+var MyBadge = function MyBadge(_ref) {
+  var _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 0 : _ref$count,
+    _ref$showZero = _ref.showZero,
+    showZero = _ref$showZero === void 0 ? false : _ref$showZero,
+    _ref$dot = _ref.dot,
+    dot = _ref$dot === void 0 ? false : _ref$dot,
+    _ref$overflowCount = _ref.overflowCount,
+    overflowCount = _ref$overflowCount === void 0 ? 99 : _ref$overflowCount,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? '#f5222d' : _ref$color,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    children = _ref.children;
+  var isZero = count === 0;
+  var displayCount = count > overflowCount ? "".concat(overflowCount, "+") : count;
+  var shouldShow = dot || !isZero || showZero;
+  var badgeStyle = _objectSpread({
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    transform: 'translate(50%, -50%)',
+    minWidth: dot ? 8 : 20,
+    height: dot ? 8 : 20,
+    lineHeight: dot ? '8px' : '20px',
+    padding: dot ? 0 : '0 6px',
+    fontSize: 12,
+    borderRadius: 10,
+    background: color,
+    color: '#fff',
+    textAlign: 'center',
+    whiteSpace: 'nowrap'
+  }, style);
+  var wrapperStyle = {
+    position: 'relative',
+    display: 'inline-block'
+  };
+  return /*#__PURE__*/React.createElement("span", {
+    style: wrapperStyle
+  }, children, shouldShow && /*#__PURE__*/React.createElement("sup", {
+    style: badgeStyle
+  }, !dot && displayCount));
+};
+export default MyBadge;

package/dist/LiteFlowEditor/panels/toolBar/widgets/common/makeBtnWidget.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactElement } from 'react';
+import { Graph } from '@antv/x6';
+import '../global.less';
+interface IOptions {
+    tooltip: string;
+    getIcon: (flowGraph: Graph, checkList: Array<any>) => ReactElement;
+    handler: (flowGraph: Graph, props?: any, checkList?: Array<any>) => void;
+    disabled?: (flowGraph: Graph) => boolean;
+    selected?: (flowGraph: Graph) => boolean;
+}
+interface IBtnWidgetProps {
+    flowGraph: Graph;
+}
+declare const makeBtnWidget: (options: IOptions) => React.FC<IBtnWidgetProps>;
+export default makeBtnWidget;