liteflow-editor-process 1.0.0

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

@@ -0,0 +1,133 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useContext } from 'react';
+import { Tooltip, Popover, message, Empty } from 'antd';
+import styles from "../index.module.less";
+import { useGraph } from "../../../../hooks";
+import GraphContext from "../../../../context/GraphContext";
+import commonIcon from "../../../../assets/common-icon.svg";
+import warningIcon from "../../../../assets/warning-icon.svg";
+import littleWarningIcon from "../../../../assets/little-warning-icon.svg";
+import "../global.less";
+import { useTranslation } from 'react-i18next';
+var makeBtnWidget = function makeBtnWidget(options) {
+  var Widget = function Widget(props) {
+    var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+    var flowGraph = useGraph();
+    var _message$useMessage = message.useMessage(),
+      _message$useMessage2 = _slicedToArray(_message$useMessage, 2),
+      messageApi = _message$useMessage2[0],
+      contextHolder = _message$useMessage2[1];
+    var tooltip = options.tooltip,
+      getIcon = options.getIcon,
+      handler = options.handler;
+    var _useContext = useContext(GraphContext),
+      checkList = _useContext.checkList;
+    var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      popIsOpen = _React$useState2[0],
+      setPopIsOpen = _React$useState2[1];
+    var iconWrapperCls = [styles.btnWidget];
+    var handleOpenChange = function handleOpenChange(open) {
+      setPopIsOpen(open);
+    };
+    var handleCheckItem = function handleCheckItem(item) {
+      return function () {
+        setPopIsOpen(false);
+        // console.log('item', item);
+        if (!Object.keys(item.model).length) {
+          messageApi.open({
+            type: 'warning',
+            content: t('check_list_tips_2')
+          });
+          return;
+        } else {
+          messageApi.open({
+            type: 'warning',
+            content: item.message
+          });
+          flowGraph.selection.reset(item.model.node);
+          flowGraph.centerCell(item.model.node);
+        }
+      };
+    };
+    var checkContent = /*#__PURE__*/React.createElement("div", {
+      className: styles.checkContent
+    }, contextHolder, /*#__PURE__*/React.createElement("div", {
+      className: styles.checkContentTitle
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.grow
+    }, t('check_list'), checkList.length ? "(".concat(checkList.length, ")") : "")), checkList.length ? /*#__PURE__*/React.createElement("div", {
+      className: styles.checkContentList
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.checkTips
+    }, t('check_list_tips')), /*#__PURE__*/React.createElement("div", {
+      className: styles.checkBox
+    }, checkList.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: styles.checkContentItem,
+        onClick: handleCheckItem(item)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.checkContentItemTitle
+      }, Object.keys(item.model).length ? /*#__PURE__*/React.createElement("img", {
+        src: commonIcon,
+        alt: "",
+        className: styles.icon
+      }) : /*#__PURE__*/React.createElement("img", {
+        src: warningIcon,
+        alt: "",
+        className: styles.icon
+      }), /*#__PURE__*/React.createElement("span", null, Object.keys(item.model).length ? item.model.properties.scriptName ? item.model.properties.scriptName : item.model.id : t('tips'))), /*#__PURE__*/React.createElement("div", {
+        className: styles.checkContentItemDesc
+      }, /*#__PURE__*/React.createElement("img", {
+        src: littleWarningIcon,
+        alt: "",
+        className: styles.icon,
+        style: {
+          width: '12px',
+          height: '12px'
+        }
+      }), /*#__PURE__*/React.createElement("span", null, item.message)));
+    }))) : /*#__PURE__*/React.createElement(Empty, {
+      description: t('check_list_tips_3'),
+      image: Empty.PRESENTED_IMAGE_SIMPLE
+    }));
+    var _options$disabled = options.disabled,
+      disabled = _options$disabled === void 0 ? false : _options$disabled,
+      _options$selected = options.selected,
+      selected = _options$selected === void 0 ? false : _options$selected;
+    if (typeof disabled === 'function') {
+      disabled = disabled(flowGraph);
+      disabled && iconWrapperCls.push(styles.disabled);
+    }
+    if (typeof selected === 'function') {
+      selected = selected(flowGraph);
+      selected && iconWrapperCls.push(styles.selected);
+    }
+    var onClick = function onClick() {
+      if (disabled) return;
+      handler(flowGraph, props, checkList);
+      flowGraph.trigger('toolBar:forceUpdate');
+    };
+    return /*#__PURE__*/React.createElement(React.Fragment, null, tooltip == 'view_check_items' ? /*#__PURE__*/React.createElement(Tooltip, {
+      title: t('view_check_items')
+    }, /*#__PURE__*/React.createElement(Popover, {
+      placement: "bottom",
+      content: checkContent,
+      trigger: "click",
+      open: popIsOpen,
+      onOpenChange: handleOpenChange
+    }, /*#__PURE__*/React.createElement("div", {
+      className: iconWrapperCls.join(' '),
+      onClick: onClick
+    }, getIcon(flowGraph, checkList)))) : /*#__PURE__*/React.createElement(Tooltip, {
+      title: t(tooltip)
+    }, /*#__PURE__*/React.createElement("div", {
+      className: iconWrapperCls.join(' '),
+      onClick: onClick
+    }, getIcon(flowGraph, checkList))));
+  };
+  return Widget;
+};
+export default makeBtnWidget;

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

@@ -0,0 +1,14 @@
+import React, { ReactElement } from 'react';
+import { Graph } from '@antv/x6';
+interface IOptions {
+    tooltip: string;
+    getIcon: (flowGraph: Graph) => ReactElement;
+    getOverlay: (flowGraph: Graph, onChange: (data: any) => void) => ReactElement;
+    handler: (flowGraph: Graph, data: any) => void;
+    disabled?: (flowGraph: Graph) => boolean;
+}
+interface IDropdownWidgetProps {
+    flowGraph: Graph;
+}
+declare const makeDropdownWidget: (options: IOptions) => React.FC<IDropdownWidgetProps>;
+export default makeDropdownWidget;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Tooltip, Dropdown } from 'antd';
+import { CaretDownOutlined } from '@ant-design/icons';
+import styles from "../index.module.less";
+var makeDropdownWidget = function makeDropdownWidget(options) {
+  var Widget = function Widget(props) {
+    var flowGraph = props.flowGraph;
+    var tooltip = options.tooltip,
+      getIcon = options.getIcon,
+      getOverlay = options.getOverlay,
+      handler = options.handler;
+    var iconWrapperCls = [styles.btnWidget];
+    var _options$disabled = options.disabled,
+      disabled = _options$disabled === void 0 ? false : _options$disabled;
+    if (typeof disabled === 'function') {
+      disabled = disabled(flowGraph);
+      disabled && iconWrapperCls.push(styles.disabled);
+    }
+    var onChange = function onChange(data) {
+      if (disabled) return;
+      handler(flowGraph, data);
+      flowGraph.trigger('toolBar:forceUpdate');
+    };
+    return /*#__PURE__*/React.createElement(Tooltip, {
+      title: tooltip
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      disabled: disabled,
+      overlay: getOverlay(flowGraph, onChange),
+      trigger: ['click']
+    }, /*#__PURE__*/React.createElement("div", {
+      className: iconWrapperCls.join(' ')
+    }, getIcon(flowGraph), " ", /*#__PURE__*/React.createElement(CaretDownOutlined, {
+      className: styles.caret
+    }))));
+  };
+  return Widget;
+};
+export default makeDropdownWidget;

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import makeBtnWidget from "./common/makeBtnWidget";
+import { LayoutOutlined } from '@ant-design/icons';
+import { MIN_ZOOM } from "../../../constant";
+var FitWindow = makeBtnWidget({
+  tooltip: 'adaptation_window',
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(LayoutOutlined, null);
+  },
+  handler: function handler(flowGraph) {
+    flowGraph.zoomToFit({
+      minScale: MIN_ZOOM,
+      maxScale: 1
+    });
+  }
+});
+export default FitWindow;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function getFullscreenElement(): any;
+declare const FullscreenTools: React.FC<any>;
+export default FullscreenTools;

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

@@ -0,0 +1,104 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState, useEffect } from 'react';
+import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
+import makeBtnWidget from "./common/makeBtnWidget";
+import { useGraph, useGraphWrapper } from "../../../hooks";
+export function getFullscreenElement() {
+  var element = document;
+  return element.fullscreenElement || element.mozFullScreenElement || element.msFullScreenElement || element.webkitFullscreenElement || null;
+}
+var previousSize = {
+  width: 800,
+  height: 500
+};
+var _onFullscreenChange = function onFullscreenChange() {
+  // Do nothing
+};
+var Fullscreen = makeBtnWidget({
+  tooltip: 'full_screen',
+  handler: function handler(flowGraph, props) {
+    var element = props.graphWrapperRef.current;
+    previousSize.width = element.clientWidth;
+    previousSize.height = element.clientHeight;
+    _onFullscreenChange = function onFullscreenChange() {
+      flowGraph.resize(previousSize.width, previousSize.height);
+      flowGraph.centerContent();
+      document.removeEventListener('fullscreenchange', _onFullscreenChange);
+      flowGraph.trigger('flowGraph:fullscreenchange');
+    };
+    if (element.requestFullscreen) {
+      element.requestFullscreen();
+    } else if (element.mozRequestFullScreen) {
+      element.mozRequestFullScreen();
+    } else if (element.msRequestFullscreen) {
+      element.msRequestFullscreen();
+    } else if (element.webkitRequestFullscreen) {
+      element.webkitRequestFullscreen();
+    }
+    setTimeout(function () {
+      flowGraph.resize(element.clientWidth, element.clientHeight);
+      flowGraph.centerContent();
+      document.addEventListener('fullscreenchange', _onFullscreenChange);
+      flowGraph.trigger('flowGraph:fullscreenchange');
+    }, 300);
+  },
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(FullscreenOutlined, null);
+  },
+  disabled: function disabled() {
+    return false;
+  }
+});
+var FullscreenExit = makeBtnWidget({
+  tooltip: '退出全屏',
+  handler: function handler() {
+    if (getFullscreenElement()) {
+      if (_onFullscreenChange) {
+        _onFullscreenChange();
+      }
+      var element = document;
+      if (element.exitFullscreen) {
+        element.exitFullscreen();
+      } else if (element.mozCancelFullScreen) {
+        element.mozCancelFullScreen();
+      } else if (element.msExitFullscreen) {
+        element.msExitFullscreen();
+      } else if (element.webkitExitFullscreen) {
+        element.webkitExitFullscreen();
+      }
+    }
+  },
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(FullscreenExitOutlined, null);
+  },
+  disabled: function disabled() {
+    return false;
+  }
+});
+var FullscreenTools = function FullscreenTools(props) {
+  var flowGraph = useGraph();
+  var graphWrapperRef = useGraphWrapper();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFullscreen = _useState2[0],
+    setIsFullscreen = _useState2[1];
+  useEffect(function () {
+    function fullscreenchange() {
+      setIsFullscreen(!isFullscreen);
+    }
+    flowGraph.on('flowGraph:fullscreenchange', fullscreenchange);
+    return function () {
+      flowGraph.off('flowGraph:fullscreenchange', fullscreenchange);
+    };
+  }, [flowGraph, setIsFullscreen, isFullscreen]);
+  if (isFullscreen) {
+    return /*#__PURE__*/React.createElement(FullscreenExit, _extends({}, props, {
+      graphWrapperRef: graphWrapperRef
+    }));
+  }
+  return /*#__PURE__*/React.createElement(Fullscreen, _extends({}, props, {
+    graphWrapperRef: graphWrapperRef
+  }));
+};
+export default FullscreenTools;

package/dist/LiteFlowEditor/panels/toolBar/widgets/global.less

@@ -0,0 +1,6 @@
+.ant-popover-inner{
+  border-radius: .75rem !important;
+  .ant-popover-inner-content{
+    padding: 0 !important;
+  }
+}

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

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

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

@@ -0,0 +1,12 @@
+// import Save from './save';
+import Selection from "./selection";
+import Undo from "./undo";
+import Redo from "./redo";
+import Zoom from "./zoom";
+import FitWindow from "./fitWindow";
+// import View from './view';
+import Fullscreen from "./fullscreen";
+// import Mock from './mock';
+import Check from "./check";
+var tools = [[Zoom], [FitWindow, Undo, Redo, Selection, Fullscreen, Check]];
+export default tools;

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

@@ -0,0 +1,169 @@
+@--tw-ring-offset-shadow: 0 0 #0000;
+@--tw-ring-shadow: 0 0 #0000;
+@--tw-shadow: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
+.btnWidget {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8px;
+  min-width: 34px;
+  height: 34px;
+  font-size: 16px;
+  border-radius: 2px;
+  border: 0.5px solid transparent;
+
+  .caret {
+    margin-left: 4px;
+    font-size: 10px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    border: 0.5px solid #ccc;
+  }
+
+  &.selected {
+    border: 0.5px solid #ccc;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    background-color: #eee;
+    background-image: linear-gradient(top, #eee, #e0e0e0);
+  }
+
+  &.disabled {
+    color: #ccc;
+  }
+
+  &.disabled:hover {
+    cursor: default;
+    border: 0.5px solid transparent;
+  }
+}
+
+.zoomContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .zoomText {
+    width: 45px;
+    text-align: center;
+  }
+}
+
+.modifyStatusContainer {
+  margin-left: 8px;
+}
+
+.bgColorContainer,
+.textColorContainer,
+.borderColorContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .fillIcon {
+    position: relative;
+    top: -2px;
+    font-size: 15px;
+  }
+
+  .textIcon {
+    position: relative;
+    top: -2px;
+    font-size: 15px;
+  }
+
+  .borderColorIcon {
+    position: relative;
+    top: -2px;
+    font-size: 15px;
+  }
+
+  .colorPreview {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1.6px;
+  }
+}
+
+.checkContent {
+  width: 420px;
+  max-height: 66vh;
+  overflow-y: auto;
+  border-radius: 1rem;
+  background-color: #fff;
+  box-sizing: border-box;
+
+  .icon{
+    width: 18px;
+    height: 18px;
+    margin-right: .475rem;
+  }
+
+  .checkContentTitle{
+    width: 100%;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #101828;
+    position: sticky;
+    top: 0;
+    font-weight: 600;
+    padding: .75rem 1rem .75rem 1rem;
+    box-sizing: border-box;
+    background-color: #fff;
+    .grow{
+      flex-grow: 1;
+    }
+  }
+  .checkContentList{
+    box-sizing: border-box;
+    padding: .5rem 0;
+    .checkTips{
+      color: #676f83;
+      font-size: .75rem;
+      line-height: 1rem;
+      padding: 0 1rem;
+      box-sizing: border-box;
+    }
+    .checkBox{
+      padding: .5rem 1rem;
+      box-sizing: border-box;
+      .checkContentItem{
+        margin-bottom: .5rem;
+        border-radius: .5rem;
+        border: .5px solid #eaecf0;
+        cursor: pointer;
+        box-shadow: @--tw-ring-offset-shadow, @--tw-ring-shadow, @--tw-shadow;
+        box-sizing: border-box;
+        border-top-right-radius: .5rem;
+        border-top-left-radius: .5rem;
+        .checkContentItemTitle{
+          font-size: .75rem;
+          line-height: 1rem;
+          display: flex;
+          align-items: center;
+          padding:.5rem;
+          box-sizing: border-box;
+        }
+        .checkContentItemDesc{
+          border-top: .5px solid #eaecf0;
+          border-bottom-right-radius: .5rem;
+          border-bottom-left-radius: .5rem;
+          display: flex;
+          align-items: center;
+          padding: 1rem .75rem;
+          box-sizing: border-box;
+          color: #676f83;
+          font-size: .75rem;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+}

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

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

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

@@ -0,0 +1,83 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useContext, useState } from 'react';
+import { Select } from 'antd';
+import mocks from "../../../mock";
+import { ConditionTypeEnum } from "../../../constant";
+import styles from "./index.module.less";
+import GraphContext from "../../../context/GraphContext";
+var Mock = function Mock(props) {
+  // const {flowGraph} = props;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedValue = _useState2[0],
+    setSelectedValue = _useState2[1];
+  var _useContext = useContext(GraphContext),
+    currentEditor = _useContext.currentEditor,
+    chainObject = _useContext.chainObject;
+  var handleOnChange = function handleOnChange(value) {
+    setSelectedValue(value);
+    var mockData = mocks[value];
+    currentEditor.fromJSON(mockData);
+  };
+
+  // useEffect(() => {
+  //   setTimeout(() => {
+  //     if (chainObject?.dslData) {
+  //       currentEditor.fromJSON(chainObject?.dslData);
+  //       return;
+  //     }
+  //     currentEditor.fromJSON({});
+  //   }, 500);
+  // }, [flowGraph]);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.zoomContainer,
+    style: {
+      margin: '0 8px'
+    }
+  }, /*#__PURE__*/React.createElement("span", null, "\u793A\u4F8B\u6570\u636E\uFF1A"), /*#__PURE__*/React.createElement(Select, {
+    placeholder: "\u8BF7\u9009\u62E9\u793A\u4F8B\u6570\u636E",
+    value: selectedValue,
+    style: {
+      width: 200
+    },
+    onChange: handleOnChange,
+    options: [{
+      label: '顺序类',
+      options: [{
+        label: '串行编排(THEN)',
+        value: ConditionTypeEnum.THEN
+      }, {
+        label: '并行编排(WHEN)',
+        value: ConditionTypeEnum.WHEN
+      }]
+    }, {
+      label: '分支类',
+      options: [{
+        label: '选择编排(SWITCH)',
+        value: ConditionTypeEnum.SWITCH
+      }, {
+        label: '条件编排(IF)',
+        value: ConditionTypeEnum.IF
+      }]
+    }
+    // {
+    //   label: '循环类',
+    //   options: [
+    //     {label: 'FOR循环', value: ConditionTypeEnum.FOR},
+    //     {label: 'WHILE循环', value: ConditionTypeEnum.WHILE},
+    //     {label: 'ITERATOR循环', value: ConditionTypeEnum.ITERATOR},
+    //   ],
+    // },
+    // {
+    //   label: '其他类',
+    //   options: [
+    //     {label: '捕获异常(CATCH)', value: ConditionTypeEnum.CATCH},
+    //     {label: '与或非(AND_OR_NOT)', value: ConditionTypeEnum.AND},
+    //     {label: '子流程(CHAIN)', value: ConditionTypeEnum.CHAIN},
+    //   ],
+    // },
+    ]
+  }));
+};
+export default Mock;

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { RedoOutlined } from '@ant-design/icons';
+import { shortcuts } from "../../../common/shortcuts";
+import makeBtnWidget from "./common/makeBtnWidget";
+import { history } from "../../../hooks/useHistory";
+var Save = makeBtnWidget({
+  tooltip: 'redo',
+  handler: shortcuts.redo.handler,
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(RedoOutlined, null);
+  },
+  disabled: function disabled() {
+    return !history.canRedo();
+  }
+});
+export default Save;

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SaveOutlined } from '@ant-design/icons';
+import { shortcuts } from "../../../common/shortcuts";
+import makeBtnWidget from "./common/makeBtnWidget";
+var Save = makeBtnWidget({
+  tooltip: 'save',
+  handler: shortcuts.save.handler,
+  getIcon: function getIcon() {
+    return /*#__PURE__*/React.createElement(SaveOutlined, null);
+  }
+});
+export default Save;

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

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